Wie kann ich untergeordnete Komponenten in Angular 4 mit ::ng-deep formatieren?

Styling untergeordneter Komponenten in Angular 4 mit ::ng-deep

Das Überschreiben von CSS-Eigenschaften von übergeordneten zu untergeordneten Komponenten kann eine häufige Aufgabe sein Eckig. In Angular 4 können Sie dazu den Selektor ::ng-deep nutzen.

::ng-deep, früher bekannt als /deep/ und später >>> ist ein schattendurchdringender Kombinator, der die Kaskadierung von Stilen auf verschachtelte Elemente ermöglicht, selbst wenn diese in untergeordneten Komponenten gekapselt sind. Dies ist besonders nützlich, wenn Sie das Erscheinungsbild von Elementen in externen Komponenten oder Bibliotheken anpassen.

Verwendung

Um ::ng-deep zu verwenden, stellen Sie es einfach dem CSS-Selektor voran Sie möchten auf die Elemente der untergeordneten Komponente anwenden. Zum Beispiel:

.parent {
  ::ng-deep .child-element {
    color: red;
  }
}

Kompatibilität

Es ist wichtig zu beachten, dass ::ng-deep in Internet Explorer 11 (IE11) nicht unterstützt wird. Dies liegt daran, dass IE11 keine Shadow-Piercing-Kombinatoren unterstützt. Aus diesem Grund wird empfohlen, alternative Methoden zum Gestalten untergeordneter Komponenten in IE11 zu verwenden, z. B. die Verwendung des View Encapsulation-Flags oder das Erstellen eines Angular-Moduls, das die gewünschten Stile verfügbar macht.

Beispiel

Bedenken Sie den folgenden HTML-Code:

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

Und das folgende CSS:

<code class="css">.container {
  ::ng-deep {
    .child-element {
      color: blue;
    }
  }
}</code>

Dieses CSS wendet die blaue Farbe auf alle Elemente mit dem untergeordneten Klassenelement innerhalb an app-child-component.

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