Angular - 5.10-En savoir plus sur l'encapsulation des vues

Dans la dernière vidéo, vous avez appris comment Angular encapsule vos styles. Vous pouvez maintenant passer outre cette encapsulation. Si vous retournez à votre code pour le composant du server element, vous pouvez ajouter quelque chose au décorateur du ad composant. C'est ce qu'on appelle l'encapsulation de cette propriété.

Comme valeur, vous pouvez accéder à une encapsulation de vue qui doit être importée depuis @angular/core. Assurez-vous d'ajouter cet import, puis vous pouvez choisir entre les modes suivants : "none" (aucune), "emulate" (émuler) qui est la valeur par défaut, et "native" (natif).

Si vous utilisez "none", cela garantira que si nous regardons à nouveau notre component et que nous inspectons server élément, vous ne verrez pas ces attributs étranges ajoutés à vos éléments. Par conséquent, ce composant n'utilise plus l'encapsulation de vue. Les autres composants continueront à l'utiliser. Vous verrez toujours ces attributs, mais si vous définissez des styles pour ce composant dans le fichier CSS de ce composant, ils seront appliqués globalement. Et je peux le démontrer en allant dans ce fichier CSS. Et si je change la couleur du label, qui se trouve dans le cockpit et non dans ce composant, en rouge, vous verrez que le label est écrasé.

Bien que ce label possède toujours son attribut unique personnalisé, il s'agit toujours d'un label en fin de compte. Et dans ce composant du server élément, nous désactivons l'encapsulation. Ainsi, nos sélecteurs ne sont pas modifiés par Angular. Ils ne reçoivent pas leur sélecteur unique ; ils sont donc appliqués ; ils sont utilisés dans toute l'application, ce qui affecte également d'autres composants. Ce pourrait être le comportement que vous souhaitez, il y a de fortes chances que ce ne soit pas le cas mais il est important de savoir que vous pouvez changer ce comportement.

En plus de None, Vous pouvez également choisir le mode natif qui utilise la technologie shadowDom. Cela devrait vous donner le même résultat qu'avec "emulate", mais seulement dans les navigateurs qui la prennent en charge. C'est pourquoi, dans la plupart des cas, il est préférable de choisir "emulate". Avec cela, votre label ne devrait plus être rouge maintenant.

Voilà donc comment vous pouvez le modifier et comment fonctionne l'encapsulation des vues. Un outil agréable qui permet de s'assurer que, par défaut, seul votre composant reçoit les styles que vous avez définis pour lui. Mais comme vous l'avez appris, il peut être écrasé.