{ font-size: 3em }'
],
// [...]
})
export class MyComponent { }
Listing 6–4 Style-Definitionen in Komponenten
6.1.2Komponenten in der Anwendung verwenden
Rule of One
Eine Komponente wird immer in einer eigenen TypeScript-Datei notiert. Dahinter steht das Rule of One: Eine Datei beinhaltet immer genau einen Bestandteil und nicht mehr. Dazu kommen meist ein separates Template, eine Style-Datei und eine Testspezifikation. Diese vier Dateien sollten wir immer gemeinsam in einem eigenen Ordner unterbringen. So wissen wir sofort, welche Dateien zu der Komponente gehören.
Eine Komponente besitzt einen Selektor und wird automatisch an die DOM-Elemente gebunden, die auf diesen Selektor matchen. Das jeweilige Element wird das Host-Element der Komponente. Das Prinzip haben wir einige Seiten zuvor schon beleuchtet.
Komponenten im AppModule registrieren
Damit dieser Mechanismus funktioniert, muss Angular die Komponente allerdings erst kennenlernen. Die reine Existenz einer Komponentendatei reicht nicht aus. Stattdessen müssen wir alle Komponenten der Anwendung im zentralen AppModule registrieren.
Dazu dient die Eigenschaft declarations im Decorator @NgModule(). Hier werden alle Komponenten2 notiert, die zur Anwendung gehören. Damit wir die Typen dort verwenden können, müssen wir alle Komponenten importieren.
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FooComponent } from './foo/foo.component';
import { BarComponent } from './bar/bar.component';
@NgModule({
declarations: [
AppComponent,
FooComponent,
BarComponent
],
// ...
})
export class AppModule { }
Listing 6–5 Alle Komponenten müssen im AppModule deklariert werden.
6.1.3Template-Syntax
Nachdem wir die Grundlagen von Komponenten kennengelernt haben, tauchen wir nun in die Notation von Templates ein.
Angular erweitert die gewohnte Syntax von HTML mit einer Reihe von leichtgewichtigen Ausdrücken. Damit können wir dynamische Features direkt in den HTML-Templates nutzen: Ausgabe von Daten, Reaktion auf Ereignisse und das Zusammenspiel von mehreren Komponenten mit Bindings.
Wir stellen in diesem Abschnitt die Einzelheiten der Template-Syntax zunächst als Übersicht vor. Im Verlauf des Buchs gehen wir auf die einzelnen Konzepte noch gezielter ein.
{{ Interpolation }}
Ein zentraler Bestandteil der Template-Syntax ist die Interpolation. Hinter diesem etwas sperrigen Begriff verbirgt sich die Möglichkeit, Daten mit zwei geschweiften Klammern in ein Template einzubinden.
Template-Ausdruck Die Daten werden bei der Interpolation automatisch aktualisiert.
Zwischen den Klammern wird ein sogenannter Template-Ausdruck angegeben. Dieser Ausdruck bezieht sich immer direkt auf die zugehörige Komponentenklasse. Im einfachsten Fall ist ein solcher Ausdruck also ein Name eines Propertys aus der Klasse. Ausdrücke können aber auch komplexer sein und z. B. Arithmetik enthalten. Vor der Ausgabe werden die Ausdrücke ausgewertet, und der Rückgabewert wird schließlich im Template angezeigt. Besonders interessant ist dabei: Ändern sich die Daten im Hintergrund, wird die Anzeige stets automatisch aktualisiert! Wir müssen uns also nicht darum kümmern, die View aktuell zu halten, sondern nur die Daten in der Komponentenklasse ändern.
| {{ name }} | Property der Komponente |
| {{ 'foobar' }} | String-Literal |
| {{ myNumber + 1 }} | Property und Arithmetik |
Die Werte null und undefined werden übrigens immer als leerer String ausgegeben.
Der Safe-Navigation-Operator ?
Stellen wir uns vor, dass wir die Felder eines Objekts in unserem Template anzeigen möchten. Wenn das Objekt allerdings undefined oder null ist, erhalten wir einen Fehler zur Laufzeit der Anwendung, weil es nicht möglich ist, auf eine Eigenschaft eines nicht vorhandenen Objekts zuzugreifen.
An dieser Stelle kann der Safe-Navigation-Operator helfen: Er überprüft, ob das angefragte Objekt vorhanden ist oder nicht. Falls nicht, wird der Ausdruck zum Binden der Daten gar nicht erst ausgewertet.
<p>{{ person?.hobbies }}</p>
Existiert das Objekt person, werden die Hobbys ausgegeben – es gibt aber keinen Fehler, wenn das Objekt undefined ist.
Operator sparsam verwenden
Aber Achtung: Bitte benutzen Sie diesen Operator sparsam. Eine bessere Praxis ist es, fehlende Objekteigenschaften mit der Strukturdirektive ngIf abzufangen (siehe Seite 84) und den kompletten Container erst dann anzuzeigen, wenn alle Daten vollständig sind. Ein weiterer Ansatz zur Lösung ist, die Propertys immer mit Standardwerten zu belegen. Hat ein Property immer einen Wert, muss auch nicht gegen undefined geprüft werden.
[Property Bindings]
Mit Property Bindings werden Daten von außen an ein DOM-Element übermittelt. Wir notieren ein Property Binding mit eckigen Klammern. Darin wird der Name des Propertys auf dem DOM-Element angegeben, das wir beschreiben wollen. Das klingt zunächst umständlich, wir werden uns aber noch ausführlich mit Property Bindings beschäftigen.
Property Bindings werden automatisch aktualisiert.
Im rechten Teil des Bindings wird ein Template-Ausdruck angegeben, also wie bei der Interpolation z. B. ein Property der aktuellen Komponente
