In diesem Artikel wird hauptsächlich die Methode zum Hinzufügen einer Stilklasse zur Beschriftung der Komponente selbst in Angular 5 vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.
Es gibt zwei Möglichkeiten, Stile zu den Tags der Komponente selbst in Angular 5 hinzuzufügen:
Methode 1: Verwenden Sie das Host-Attribut von @Component
@Component({ selector : 'myComponent', host : { '[style.color]' : "'red'", '[style.background-color]' : 'backgroundColor' } }) class MyComponent { backgroundColor: string; constructor() { this.backgroundColor = 'blue'; } }
in Das Hinzufügen von Attributen in der Hostkonfiguration entspricht der Verwendung von Bindungsattributen auf Etiketten.
Stil festlegen:
'[style.color]': "'red'": Beachten Sie, dass sich in den doppelten Anführungszeichen des roten Werts ein einfaches Anführungszeichen befindet .
'[style.background-color]':'backgroundColor': Dies bezieht sich auf die Variable backgroundColor in der Komponente.
Der Vorteil dieser Methode besteht darin, dass Sie Komponentenvariablen in Stilen verwenden können.
Klasse festlegen:
@Component({ selector : 'myComponent', host : { '[class.myclass]' : 'showMyClass' } }) class MyComponent { showMyClass = false; constructor() { } toggleMyClass() { this.showMyClass = !this.showMyClass; } }
Methode 2: Verwendung: Host-Selektor im Stil
@Component({ selector : 'myComponent', styles : [` :host { color: red; background-color: blue; } `] }) class MyComponent {}
Das Obige habe ich hoffentlich für alle zusammengestellt dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Doppelschichtige Ajax-Verschachtelung ( Beispiel für die Verwendung mehrerer Ebenen
Ajax-Implementierung des Popup-Funktionscodes für die Stadtauswahl ohne Aktualisierung
Das obige ist der detaillierte Inhalt vonAngular5-Methode zum Hinzufügen einer Stilklasse zum Tag der Komponente selbst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!