Fügen Sie Stile zu Komponenten-Tags hinzu

Dieses Mal werde ich Ihnen das Hinzufügen von Stilen zu Komponenten-Tags und die Vorsichtsmaßnahmen beim Hinzufügen von Stilen zu Komponenten-Tags vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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';
 }
}

, um Attribute in der Host-Konfiguration hinzuzufügen, was der Verwendung von Bindungsattributen auf Etiketten entspricht.

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:

Vue+Nuxt.js macht serverseitiges Rendering

Holen Sie sich das größte und kleinste Element in Nummer

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