Angular5-Schrittanleitung zum Hinzufügen einer Stilklasse zu Komponenten-Tags

Dieses Mal bringe ich Ihnen die Schritt-für-Schritt-Anleitung zum Hinzufügen von Stilklassen zu Komponenten-Tags in Angular5. Was sind die Vorsichtsmaßnahmen für das Hinzufügen von Stilklassen zu Komponenten-Tags in Angular5? Praktischer Fall, werfen wir einen Blick darauf.

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:

Ausführliche Erklärung zur Verwendung von React Router v4

Anleitung für den Einstieg in Vue Forms

Das obige ist der detaillierte Inhalt vonAngular5-Schrittanleitung zum Hinzufügen einer Stilklasse zu Komponenten-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!