web-dev-qa-db-fra.com

Problèmes de style Angular2 causés par les attributs DOM _ngcontent- * vs _nghost- *

J'ai un problème avec scss et le cli: angular ajoute un attribut _nghost-fyw-1 à la balise apps (composant) pendant l'exécution. en même temps, il ajoute un sélecteur d'attribut à mon css appelé _ngcontent-fyw-1 qui bien sûr ne fonctionnera pas.

Avez-vous une idée de comment je pourrais changer ce comportement/l'éviter?

PS: cela s'applique également aux CSS classiques.

mon fichier .scss de composants ressemble à ceci:

my-comp {
  h1 {
    background-color: red;
  }
}
cssangularsass
17
wzr1337

Bien,

J'ai trouvé la réponse moi-même. En utilisant les paramètres par défaut, vous ne devez pas fournir l'emballage my-comp sélecteur d'élément dans les composants css.

Utilisez plutôt le * sélecteur d'élément pour affecter tous les éléments imbriqués dans my-comp. Sinon, angular traitera le my-comp sélecteur comme élément supplémentaire et donc ajouter le _ng-content-* attribut, qui bien sûr n'est pas présent dans le DOM.

Une autre option consiste à désactiver ViewEncapsulation pour votre composant - sachez que cela n'affecte que le composant my-comp

import {Component, ViewEncapsulation} from 'angular2/core'

@Component({
  selector: 'my-comp',
  encapsulation: ViewEncapsulation.None,
  ...
});

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation explique parfaitement les trois modes de réglage différents.

43
wzr1337

mise à jour

C'est ::ng-deep depuis un certain temps.
Voir également les commentaires ci-dessous.

original

Vous n'avez pas fourni trop de détails sur l'endroit où vous ajoutez vos styles et les éléments que vous ciblez avec les sélecteurs.

La manière "officielle" si vous voulez que les styles franchissent les frontières des éléments consiste à utiliser >>> comme

:Host >>> h1 {
  background-color: red;
}
  • :Host cible l'élément courant.
  • >>> (ou /deep/) fait Angular ignorer _nghost-xxx attributs qui est utilisé pour l'émulation d'encapsulation de style de composant.

Voir aussi Les styles dans le composant pour D3.js ne s'affichent pas dans angular 2

17
Günter Zöchbauer