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

J'ai un problème avec scss et de la cli: angulaire ajoute un attribut _nghost-fyw-1 pour les applications tag (composant) au cours de l'exécution. en même temps, il ajoute un attribut sélecteur de mon css appelé _ngcontent-fyw-1 qui bien sûr ne fonctionne pas.

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

PS: il s'applique également aux régulièrement des css.

mes composants .scss fichier ressemble à ceci:

my-comp {
  h1 {
    background-color: red;
  }
}

OriginalL'auteur wzr1337 | 2016-06-07

  1. 36

    Bien,

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

    Au lieu d'utiliser l' * sélecteur d'élément à affecter tous les éléments imbriqués dans my-comp. Sinon, angulaire permettra de traiter le my-comp sélecteur comme un élément supplémentaire et ainsi ajouter de la _ng-content-* attribut, ce qui bien sûr n'est pas présent dans le DOM.

    Une autre option est de désactiver ViewEncapsulation pour votre composant - être conscient qu'il modifie juste 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 les trois réglages différents modes parfaitement.

    Je ne comprends pas la première partie. Pourquoi devrait-on utiliser *? N'est-ce pas :host est-ce? De Toute Façon, ViewEncapsulation.Aucun sauvé mon dos lors de l'utilisation d'une ancienne syntaxe surligneur. +1
    En d'autres termes. Ensemble { encapsulation: ViewEncapsulation.None } dans la déclaration des constituants options.
    pas de travail dans mon Angulaire 6 solution

    OriginalL'auteur

  2. 17

    Vous n'avez pas fournir trop de détails lorsque vous ajoutez vos styles et quels sont les éléments qui vous cible avec les sélecteurs.

    "Officiel" chemin si vous voulez styles de franchir les limites d'élément est d'utiliser >>> comme

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

    Voir aussi Styles pour D3.js ne pas afficher dans angulaire 2

    (obsolète) /profondeur/, >>>,:: ng-profonde angulaire.io/guide/composant styles
    Vous pouvez ignorer cette autodérision. Il ne va pas disparaître avant il y a un remplacement.

    OriginalL'auteur