Wie formatiere ich untergeordnete Komponenten aus dem CSS einer übergeordneten Komponente in Angular?

Wie formatiere ich untergeordnete Komponenten aus der CSS-Datei der übergeordneten Komponente?

In Angular erfordert das Stylen untergeordneter Komponenten aus der CSS-Datei einer übergeordneten Komponente eine Möglichkeit, den Komponentenbereich zu durchdringen. Hier erfahren Sie, wie Sie diese Einschränkung überwinden können.

Update (Angular 4.3.0 und höher)

Mit der Einstellung der durchdringenden CSS-Kombinatoren wurde ein neuer, ::ng-deep, eingeführt. Damit können Sie untergeordnete Komponenten tief in der DOM-Struktur gezielt ansprechen.

:host ::ng-deep parent {
  color: blue;
}
:host ::ng-deep child {
  color: orange;
}

Old Way (Angular-Versionen vor 4.3.0)

Vor ::ng-deep konnten Sie Piercing verwenden CSS-Kombinatoren wie >>>, /deep/ und ::shadow, um Komponentengrenzen zu durchdringen. Beachten Sie jedoch, dass diese Kombinatoren veraltet sind und nach Möglichkeit vermieden werden sollten.

:host >>> parent {
  color: blue;
}
:host >>> child {
  color: orange;
}

Alternative Ansätze

• Kapselungsmodus: Standardmäßig sind Komponenten gekapselt Verwenden des Shadow-DOM, um zu verhindern, dass Stile außerhalb der Komponente durchsickern. Sie können die Kapselung deaktivieren, indem Sie die Kapselungseigenschaft im Komponentendekorator (@Component) auf „None“ setzen.
• styleUrls: Verwenden Sie die styleUrls-Eigenschaft in der untergeordneten Komponente, um Stile aus der übergeordneten Komponente zu importieren. Dadurch können Sie innerhalb des Gültigkeitsbereichs der untergeordneten Komponente auf das Stylesheet der übergeordneten Komponente zugreifen. Dieser Ansatz erfordert jedoch die manuelle Definition von Stilen für untergeordnete Komponenten im Stylesheet des übergeordneten Elements.

Das obige ist der detaillierte Inhalt vonWie formatiere ich untergeordnete Komponenten aus dem CSS einer übergeordneten Komponente in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!