Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich untergeordnete Komponenten aus dem übergeordneten Element in Angular mit ::ng-deep formatieren?

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

DDD
DDDOriginal
2024-10-30 22:20:03553Durchsuche

How can I style child components from the parent in Angular using ::ng-deep?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn