So fügen Sie mit Angular5 Stilklassen zu Komponenten-Tags hinzu

Dieses Mal zeige ich Ihnen, wie Sie mit Angular5 Stilklassen zu Komponentenbeschriftungen hinzufügen. Welche Vorsichtsmaßnahmen gelten für die Verwendung von Angular5 zum Hinzufügen von Stilklassen zu Komponentenbeschriftungen?

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:

1. '[style.color]': "'red'": Beachten Sie, dass sich in den doppelten Anführungszeichen des roten Werts ein einfaches Anführungszeichen befindet .

2. '[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 {}

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall gelesen haben In diesem Artikel finden Sie weitere spannende Inhalte. Beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man das Strukturverzeichnis und die Konfiguration des Vuex-Projekts richtig verwendet

Wie man mit Vue umgeht- langsames Laden des Routers Das erstmalige Laden zu vieler Ressourcen führt zu langsamer Geschwindigkeit

Das obige ist der detaillierte Inhalt vonSo fügen Sie mit Angular5 Stilklassen zu Komponenten-Tags hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!