web-dev-qa-db-fra.com

Comment styliser ng-content

Suis ce tutoriel sur la transclusion https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Cependant, il n'y a aucune mention sur la façon de styliser les éléments qui finissent par remplacer ng-content.

Il semble que je ne puisse cibler ces éléments dans le CSS que si le /deep/ mot clé, qui est normalement utilisé lors du ciblage d'un composant imbriqué. Est-ce correct?

angularangular-template
20
user1275105

mise à jour

::slotted est désormais pris en charge par tous les nouveaux navigateurs et peut être utilisé avec `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

::content xxx { ... } pourrait également fonctionner ou :Host xxx { ... }. Le calage n'est pas très strict ou précis. AUTANT QUE JE SACHE (>>>/deep/ vieux) ::ng-deep (pris en charge par SASS) et un espace font actuellement de même.

12
Günter Zöchbauer

Contenu à l'intérieur <ng-content> est isolé du composant. Il ne peut pas voir les attributs ou le style du composant.

Si vous avez besoin de le styliser, et parfois vous le ferez, vous avez deux options:

1. Écrivez simplement CSS

Vous pouvez créer un fichier CSS régulier et styliser le contenu comme ça. Vous utilisez presque certainement le polyfill DOM DOM. Le CSS standard verra à travers le polyfill et stylisera simplement l'élément. Supposons que vous ayez une barre latérale d'application. Vous pourriez écrire:

app-sidebar p {
  color:red;
}

Si vous utilisez ng-cli, toutes les règles que vous écrivez dans style.scss seront globales.

2. Utilisez: Host/deep/selector

Si vous souhaitez utiliser le polyfill DOM ombré et styliser vos composants à l'aide de l'attribut style ou styleUrls du décorateur Component, sélectionnez l'élément avec :Host, puis ignorez le polyfill DOM DOM avec le /deep/ sélecteur d'enfant.

  • :Host sélectionnera l'élément.
  • /deep/ sélectionnera les éléments sans ajouter le sélecteur d'attribut DOM fictif aux sélecteurs imbriqués.

Rassemblez-les et vous pouvez sélectionner tous les éléments imbriqués dans l'élément de composant Host, quel que soit l'endroit où ils sont déclarés.

ainsi:

:Host /deep/ p {
  color:red;
}
25
superluminary

Cela a résolu mon problème

::ng-deep {
    & > * {
         // styles here
    }
}
5
Barbu Barbu