Angulars :host-, :host-context- und ::ng-deep-Selektoren

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis mehrerer spezieller Selektoren in Angular: host, :host-context, ::ng-deep. Ich hoffe, er wird Ihnen hilfreich sein!

1. :host

:host bedeutet, die aktuelle Komponente auszuwählen. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]

1.1 Basiselement auswählen

Verwenden Sie den Pseudoklassenselektor :host um Elemente im宿主元素der Komponente auszuwählen (relativ zu den Elementen in der Komponentenvorlage). Wenn keine untergeordneten Elemente vorhanden sind, entspricht dies der Auswahl des gesamten宿主元素.

Wenn es den folgenden HTML-Code gibt:

 <app-detail></app-detail>

Der Stil der Komponente app-detail (der Stil des gesamten app-detail ) ist wie folgt:

 :Gastgeber {
Anzeige: Inline-Block;
Hintergrund: rot;
}

Die Elements wählen app-detail Element aus und der Stil lautet wie folgt:

 [_nghost-wtd-c445] {
Anzeige: Inline-Block;
Hintergrundfarbe: rot;
}

Es ist ersichtlich, dass :host direkt auf宿主元素本身einwirkt

1.2 Untergeordnete Elemente des Hostelements auswählen

Sie können nach :host einen Selektor hinzufügen, um子元素auszuwählen. Beispiel: :host h1 findet das Tag h1 in der Komponentenansicht

 :host h1 {
	Farbe: rot;
}

1.3 Bedingte Auswahl von Hostelementen

Es wird nur wirksam, wenn der Host als Ziel verwendet wird und über eine aktive Klasse verfügt.

 :host(.active){
	Randbreite: 3px;
}

So was:

 <app-detail class="active"></app-detail>

2. ::ng-deep

::ng-deep kann die verschachtelte hierarchische Beziehung von Zwischenklassennamen ignorieren. Suchen Sie direkt den Klassennamen, den Sie ändern möchten.

Wenn Sie Komponenten von Drittanbietern verwenden, müssen Sie den Stil der Komponente ändern. Verwenden Sie in diesem Fall.

2.1 Vom Host-Element zum aktuellen Element und dann zu allen untergeordneten h3-Elementen im DOM, einschließlich h3-Elementen, die Komponenten von Drittanbietern in der aktuellen Komponente verwenden

 :host ::ng-deep h3 {
Schriftstil: kursiv;
}

2.2 Suchen Sie unter einem bestimmten Typ nach einem bestimmten Typ

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
Höhe: 120px;
Rand oben: -16px;
}

3. :host-context

Wenn eine bestimmte Bedingung erfüllt sein muss, bevor der Stil angewendet werden kann. Es sucht nach CSS-Klassen in den祖先des宿主元素der aktuellen Komponente bis zum Stammknoten des Dokuments.如果sie gefunden werden, werden die folgenden Stile auf die internen Elemente本组件angewendet.

3.1 Wählen Sie Elemente im Komponentenhostelement aus

 :host-context {
	Farbe: rot;
}

3.2 Es wird nur wirksam, wenn der Host als Ziel verwendet wird und über eine aktive Klasse verfügt.

Im folgenden Beispiel wird background-color nur dann auf alle <h2> -Elemente本组件内部angewendet, wenn ein祖先元素(das Hostelement kann auch verwendet werden) die CSS-Klasse theme-light hat.

 :host-context(.theme-light) h2 {
Hintergrundfarbe: #eef;
}

3.3 Sie können nach :host-context einen Selektor hinzufügen, um Unterelemente auszuwählen

Beispiel: :host-context h1 findet das Tag h1 in der Komponentenansicht

 :host-context h1{
Farbe: Pink;
}

3.4 Kann zur Beurteilung der internen Bedingungen eines bestimmten Stils verwendet werden

 h1{
Farbe: Pink;

:host-context(.active) &{
Farbe: gelb;
}
}