Wie kann ich untergeordnete Komponenten aus dem übergeordneten Element in Angular mit ::ng-deep formatieren?

Styling untergeordneter Komponenten vom übergeordneten Element: Verwendung von ::ng-deep in Angular

Einführung
In Angular 4 können Entwickler mit Situationen konfrontiert werden, in denen es notwendig wird, die CSS-Eigenschaften von untergeordneten Komponenten gegenüber der übergeordneten Komponente zu ändern. Dies erfordert eine Methode, die die Schatten-DOM-Grenzen durchdringt und auf die gewünschten Stile abzielt. Der ::ng-deep-Selektor bietet eine Lösung für diese Herausforderung.

Verwendung von ::ng-deep
::ng-deep ist ein schattendurchdringender Selektor, der den Zugriff ermöglicht zu den Stilen der untergeordneten Komponenten der übergeordneten Komponente. Es ist die derzeit empfohlene Alternative zum veralteten /deep/-Combinator und hat denselben Alias ​​wie >>>. Durch die Verwendung von ::ng-deep können in der übergeordneten Komponente angewendete Stile kaskadiert werden und sich auf die untergeordneten Komponenten auswirken.

Beispiel
Um die Verwendung von ::ng-deep zu veranschaulichen, Betrachten Sie den folgenden Code:

<code class="html"><div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent('DETAILS')"></div></code>

<code class="css">.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}</code>

In diesem Beispiel werden die mit ::ng-deep auf die .overview-Klasse angewendeten Stile auf die p-Elemente innerhalb der untergeordneten Komponente von .overview angewendet Klasse. Die &:last-child-Pseudoklasse wirkt sich auf das letzte p-Element in dieser untergeordneten Komponente aus und entfernt den standardmäßigen unteren Rand.

IE11-Unterstützung
Es ist wichtig zu beachten, dass :: ng-deep wird in IE11 nicht unterstützt. Für Browser, die ::ng-deep nicht unterstützen, können alternative Methoden wie ViewEncapsulation.None und encapsulation: „none“ in Angular CLI-Projekten untersucht werden, um eine ähnliche Funktionalität zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich untergeordnete Komponenten aus dem übergeordneten Element in Angular mit ::ng-deep formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!