Читать книгу Angular - Ferdinand Malcher - Страница 155

Attributdirektiven wirken nur auf das jeweilige Element.

Im Gegensatz zu Strukturdirektiven wirken sich Attributdirektiven nur auf das Element selbst aus, verändern die Position im DOM-Baum aber nicht. Sie ordnen dem Element zusätzliche Logik zu und steuern damit das »innere« Verhalten.

In ihrer Verwendung unterscheiden sich Attributdirektiven nicht von Property Bindings, denn die werden in der Regel mit eckigen Klammern angegeben. Angular weiß, ob es sich um ein Property Binding oder eine Direktive handelt, und verarbeitet den Ausdruck entsprechend.

Bekannte Vertreter sind ngSwitch, ngClass, ngStyle, routerLink und routerLinkActive. Auf ngClass und ngStyle gehen wir auf den Seiten 107 und 108 noch gezielter ein, wenn wir über Class und Style Bindings sprechen. Im Kapitel zu Routing ab Seite 147 lernen wir schließlich auch den routerLink kennen.

Sie werden sehen, dass wir Attributdirektiven auf zwei Arten verwenden können:

1 mit eckigen Klammern, wie das Property Binding<div [myDirective]="foo"></div>

2 in Attributschreibweise ohne Klammern<div myDirective="foo"></div>

Der Unterschied ist subtil, aber sehr wichtig: Wenn auf der linken Seite eckige Klammern notiert sind, so wird der rechtsseitige Wert als Ausdruck interpretiert. foo bezieht sich also im ersten Beispiel auf das Property foo aus der Komponentenklasse. Lassen wir die eckigen Klammern weg, so wird rechts ein String angegeben. foo bezeichnet an dieser Stelle also tatsächlich die Zeichenkette foo.