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

Vereinfachung des schattendurchdringenden Stylings mit ::ng-deep in Angular

Die Notwendigkeit, verschachtelte Komponenten aus ihrem übergeordneten Element zu stylen, ist eine häufige Herausforderung in Angular. Während der veraltete /deep/-Kombinator einst eine Lösung war, wird jetzt empfohlen, den ::ng-deep-Selektor zu verwenden.

Zweck von ::ng-deep

::ng-deep können Sie die Komponentenkapselung durchdringen und Stile vom übergeordneten Element auf untergeordnete Komponenten anwenden. Diese Funktion ist besonders nützlich, wenn Sie die vorhandenen Stile des Kindes überschreiben oder ergänzen müssen.

Syntax und Beispiel

Die Syntax von ::ng-deep lautet wie folgt:

<code class="css">::ng-deep {
  /* Styles to apply to child components */
}</code>

Wenn Sie beispielsweise eine übergeordnete Komponente mit einem div-Element haben und die Absatzelemente innerhalb der untergeordneten Komponente formatieren möchten, können Sie den folgenden Code verwenden:

<code class="html"><div class="parent-div">
  <child-component></child-component>
</div></code>

<code class="css">.parent-div {
  ::ng-deep {
    p {
      color: red;
    }
  }
}</code>

Dieses CSS überschreibt die Standardfarbe der Absatzelemente in der untergeordneten Komponente.

IE11-Kompatibilität

Es ist wichtig zu beachten, dass ::ng-deep wird von Internet Explorer 11 nicht unterstützt. Wenn Sie IE11 als Ziel haben, müssen Sie daher möglicherweise alternative Ansätze für schattendurchdringende Stile erkunden, z. B. die untergeordnete Komponente in ein Div einschließen und stattdessen dieses Div formatieren.

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