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

Styles werden einer Komponente zugeordnet und wirken damit auch nur auf die Inhalte dieser Komponente. Die Technik dahinter nennt sich View Encapsulation und isoliert den Gültigkeitsbereich eines Anzeigebereichs von anderen. Jedes DOM-Element in einer Komponente erhält automatisch ein zusätzliches Attribut mit einem eindeutigen Bezeichner, siehe Screenshot. Die vom Entwickler festgelegten Styles werden abgeändert, sodass sie nur für dieses Attribut wirken. So funktioniert der Style nur in der Komponente, in der er deklariert wurde. Es gibt noch andere Strategien der View Encapsulation, auf die wir aber hier nicht eingehen wollen.

Angular generiert automatisch Attribute für die View Encapsulation.

Die Styles werden ebenfalls in den Metadaten einer Komponente angegeben. Dafür sind zwei Wege möglich, die wir auch schon von den Templates kennen:

 Style-URL: Es wird eine CSS-Datei mit Style-Definitionen eingebunden (styleUrls).

 Inline Styles: Die Styles werden direkt in der Komponente definiert (styles).

Im Listing 6–4 werden beide Wege gezeigt. Wichtig ist, dass die Dateien und Styles jeweils als Arrays angelegt werden. Grundsätzlich empfehlen wir Ihnen auch hier, für die Styles eine eigene Datei anzulegen und in der Komponente zu referenzieren. Die Angular CLI unterstützt beide Varianten.

Der herkömmliche Weg zum Einbinden von Styles ist natürlich trotzdem weiter möglich: Wir können globale CSS-Dateien definieren, die in der gesamten Anwendung gelten und nicht nur auf Ebene der Komponenten. Diesen Weg haben wir gewählt, um das Style-Framework Semantic UI einzubinden, siehe Seite 70.

@Component({

styleUrls: ['./my.component.css'],

// ODER

styles: [

'h2 { color:blue }',

'h1 { font-size: 3em }'

],

// [...]

})

export class MyComponent { }