Rückblickend haben wir zuvor versucht, den Stil der eingeführten Drittanbieterkomponente zu verändern, aber das war erfolglos.
:host stellt einen Selektor dar, der die aktuelle Komponente auswählt.
::ng-deep kann die verschachtelten Hierarchiebeziehungen der ZwischenklasseName ignorieren. Finde direkt den Klassennamen, den du ändern möchtest.
Die offizielle Dokumentation besagt jedoch, dass ng-deep in zukünftigen Versionen aufgegeben wird, und es ist unbekannt, welche Art von Syntax es in Zukunft sein wird.
Die Eigenschaft oben auf der Komponente kann auf styleUrls gesetzt werden, um das CSS-Stylesheet der aktuellen Komponente festzulegen.
Das eingeführte Stylesheet beeinflusst nur das aktuelle Tag-Element und keine anderen Komponenten, was ein wichtiges Merkmal des Angular-Frameworks ist.
CSS-Code:
Schauen wir uns den endgültig generierten CSS-Stil im Browser an, wie unten gezeigt:
.itsvse1[_ngcontent-serverApp-c228] {
Hintergrundfarbe: Azurblau;
}
[_nghost-serverApp-c228] .itsvse2 {
Hintergrundfarbe: Grün;
}
[_nghost-serverApp-c228] .itsvse3 {
Hintergrundfarbe: Rot;
}
.itsvse4 {
Hintergrundfarbe: Aqua;
}
ITSVSE1 CSS kann nur die aktuelle Komponente beeinflussen, weil alle aktuellen Knotenelemente das Attribut "_ngcontent-serverapp-c228" hinzufügen, wie in der untenstehenden Abbildung dargestellt:
(Ende)
|
Veröffentlicht am 17.06.2020 16:46:59
|
|
|
|
Vermieter|
Veröffentlicht am 26.11.2021 17:07:00
|
