47 gehen wir auf Decorators ein.
@Component({
selector: 'my-component',
template: '<h1>Hallo Angular!</h1>'
})
export class MyComponent { }
Listing 6–1 Eine simple Komponente
Metadaten Selektor
Dem Decorator werden die Metadaten für die Komponente übergeben. Beispielsweise wird hier mit der Eigenschaft template das Template für die Komponente festgelegt. Im Property selector wird ein CSS-Selektor angegeben. Damit wird ein DOM-Element ausgewählt, an das die Komponente gebunden wird.
Was ist ein CSS-Selektor?
Mit CSS-Selektoren wählen wir Elemente aus dem DOM aus. Es handelt sich um dieselbe Syntax, die wir in CSS-Stylesheets verwenden, um Elementen einen Stil zuzuweisen. In Angular nutzen wir den Selektor unter anderem, um eine Komponente an eine Auswahl von Elementen zu binden. In Tabelle 6–1 sind die geläufigsten Selektoren aufgelistet. Selektoren können kombiniert werden, um die Auswahl weiter einzuschränken. Die Möglichkeiten sind sehr vielfältig, und wir nennen an dieser Stelle nur einige Beispiele:
div.active – Containerelemente, die die CSS-Klasse active besitzen
input[type=text] – Eingabefelder vom Typ text
li:nth-child(2) – jedes zweite Listenelement innerhalb desselben Elternelements
| Selektor | Beschreibung |
| my-element | Elemente mit dem Namen my-element Beispiel: <my-element></my-element> |
| [myAttr] | Elemente mit dem Attribut myAttr Beispiel: <div myAttr="foo"></div> |
| [myAttr=bar] | Elemente mit dem Attribut myAttr und Wert bar Beispiel: <div myAttr="bar"></div> |
| .my-class | Elemente mit der CSS-Klasse my-class Beispiel: <div class="my-class"></div> |
Tab. 6–1 Geläufige CSS-Selektoren
Host-Element
Das Element, das durch den Selektor ausgewählt wurde, stellt dann die Logik und das Template der Komponente bereit und wird deshalb als Host-Element bezeichnet. Wir betrachten noch einmal das Listing 6–1: Verwenden wir das HTML-Element <my-component> in unserem Template, so wird Angular den vorherigen Inhalt des Elements mit dem neuen Inhalt der Komponente ersetzen. Das Element <my-component> wird das Host-Element für diese Komponente, und die Seite im Browser wird um folgende Elemente erweitert:
<my-component>
<h1>Hallo Angular!</h1>
</my-component>
Listing 6–2 Erzeugtes Markup für die Komponente MyComponent
Wir können dieses Element an beliebiger Stelle in unseren Templates verwenden – es wird immer durch die zugehörige Komponente ersetzt. Auf diese Weise können wir Komponenten beliebig tief verschachteln, indem wir im Template einer Komponente das Host-Element einer anderen einsetzen usw. Diese Praxis schauen wir uns im nächsten Kapitel ab Seite 102 genauer an.
Komponenten sollten nur auf Elementnamen selektieren.
Es ist eine gute Praxis, stets nur Elementnamen zu verwenden, um Komponenten einzubinden. Das Prinzip der Komponente – Template und angeheftete Logik – kann durch ein eigenständiges Element am sinnvollsten abgebildet werden. Wenn wir auf die Attribute eines Elements selektieren wollen, so sind Attributdirektiven ein sinnvoller Baustein. Wie das funktioniert und wie wir eigene Direktiven implementieren können, schauen wir uns ab Seite 380 an.
Das Template einer Komponente
Eine Komponente ist immer mit einem Template verknüpft. Das Template ist der Teil der Komponente, den der Nutzer sieht und mit dem er interagieren kann. Für die Beschreibung wird meist HTML verwendet1, denn wir wollen unsere Anwendung ja im Browser ausführen. Innerhalb der Templates wird allerdings eine Angular-spezifische Syntax eingesetzt, denn Komponenten können weit mehr, als nur statisches HTML darzustellen. Diese Syntax schauen wir uns im Verlauf dieses Kapitels noch genauer an.
Um eine Komponente mit einem Template zu verknüpfen, gibt es zwei Wege:
Template-URL: Das Template liegt in einer eigenständigen HTML-Datei, die in der Komponente referenziert wird (templateUrl).
Inline Template: Das Template wird als (mehrzeiliger) String im Quelltext der Komponente angegeben (template).
Eine Komponente besitzt genau ein Template.
In beiden Fällen verwenden wir die Metadaten des @Component()-Decorators, um die Infos anzugeben. Im Listing 6–3 sind beide Varianten zur Veranschaulichung aufgeführt. Es kann allerdings immer nur einer der beiden Wege verwendet werden, denn eine Komponente besitzt nur ein einziges Template. Die Angular CLI legt stets eine separate Datei für das Template an, sofern wir es nicht anders einstellen. Das ist auch die Variante, die wir Ihnen empfehlen möchten, um die Struktur übersichtlich zu halten.
@Component({
// Als Referenz zu einem HTML-Template
templateUrl: './my-component.html',
// ODER: als HTML-String direkt im TypeScript
template: `<h1>
Hallo Angular!
</h1>`,
// [...]
})
export class MyComponent { }
Listing 6–3 Template einer Komponente definieren
Bindings für die Kommunikation zwischen Komponente und Template
Template und Komponente sind eng miteinander verknüpft und können über klar definierte Wege miteinander kommunizieren. Der Informationsaustausch findet über sogenannte Bindings statt. Damit »fließen« die Daten von der Komponente ins Template und können dort dem Nutzer präsentiert werden. Umgekehrt können Ereignisse im Template abgefangen werden, um von der Komponente verarbeitet zu werden. Diese Kommunikation ist schematisch in Abbildung 6–1 dargestellt.