Angular2 - ajout de [_ngcontent-vac-x] pour les styles

Je suis la mise en place d'une base angulaire de l'app, et je vais essayer d'injecter un peu de css de mon point de vue. Ceci est un exemple de l'un de mes composants:

import { Component } from 'angular2/core';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';

import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';

@Component({
    selector: 'portfolio-app',
    templateUrl: '/app/views/template.html',
    styleUrls: ['../app/styles/template.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true },
    { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent }
])

export class AppComponent { }

Maintenant l' .le fichier css est demandé à partir de mon serveur, et quand j'ai inspecter le code source de la page, je peux voir qu'il a été ajouté à la tête. Mais quelque chose de bizarre qui se passe:

<style>@media (min-width: 768px) {


    .outer[_ngcontent-mav-3] {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .mainContainer[_ngcontent-mav-3] {
        display: table-cell;
        vertical-align: middle;
    }
    .appContainer[_ngcontent-mav-3] {
        width: 95%;
        border-radius: 50%;
    }
    .heightElement[_ngcontent-mav-3] {
        height: 0;
        padding-bottom: 100%;
    }
}</style>

est généré à partir de ce fichier:

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
    /* center the mainContainer */

    .outer {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .mainContainer {
        display: table-cell;
        vertical-align: middle;
    }
    .appContainer {
        width: 95%;
        border-radius: 50%;
    }
    .heightElement {
        height: 0;
        padding-bottom: 100%;
    }
}

Quelqu'un peut-il expliquer où le _ngcontent-vac tag vient de quoi s'agit-il et comment vous en débarrasser?

Je pense que c'est la raison pour laquelle mon style n'est pas appliquée à des modèles.

Si vous avez besoin de plus d'info à propos de l'application de la structure, veuillez checkout mon gitRepo, ou de demander et je vais ajouter le code de la question.

Merci pour l'aide.

L'encapsulation par défaut est ViewEncapsulation#Émulé, check it out.

InformationsquelleAutor Miha Šušteršič | 2016-03-25

39

update2

::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

mise à jour

/deep/ et >>> sont obsolètes.
::ng-deep les remplace. ::-deep est également marquée obsolète dans la source et de la documentation, mais cela signifie qu'il sera également supprimé par la suite.

Je pense que cela dépend du W3C vient avec de la thématisation de l'ombre DOM (comme https://tabatkins.github.io/specs/css-shadow-parts/)

C'est essentiellement une solution de contournement jusqu'à ce que tous les navigateurs prennent en charge qu'en mode natif et ViewEncapsulation.Emulated peut être entièrement supprimés.

::ng-deep est également pris en charge dans le SASS (ou, selon le SASS de mise en œuvre)

original

Vue, l'encapsulation aide à prévenir les styles de saignement ou de composants. La valeur par défaut de l'encapsulation est ViewEncapsulation.Emulated où les classes comme _ngcontent-mav-x sont ajoutés les étiquettes des composants et aussi les styles sont réécrits pour s'appliquer uniquement à l'appariement des classes.

Cet émule dans une certaine mesure le comportement par défaut de l'ombre DOM.

Vous pouvez désactiver cette encapsulation ajoutant encapsulation: ViewEncapsulation.None à la @Component() décorateur.

Une autre manière est la plus récemment (re-)introduit ombre piercing CSS combinators >>>, /deep/, et ::shadow. Ces combinators ont été introduites pour le style de l'ombre DOM mais sont déconseillés là. Angulaire de les introduire récemment jusqu'à ce que d'autres mécanismes comme le CSS variables sont mises en œuvre.
Voir aussi https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> et /deep/ sont équivalentes et à l'aide de cette combinators rend les styles ignorer l'ajout des classes d'assistance (_ngcontent-mav-x)
```
* >>> my-component, /* same as */
* /deep/ my-component {
  background-color: blue;
}
```
s'applique à tous les my-component balises a pas d'importance à quelle profondeur ils sont imbriqués dans d'autres composants.
```
some-component::shadow * {
  background-color: green;
} 
```
s'applique à tous les éléments dans le modèle de some-component, mais pas plus de descendants.

Ils peuvent aussi être combinés
```
* /deep/ my-component::shadow div {
  background-color: blue;
}
```
cela s'applique à tous les éléments div dans le modèle de tous les my-component modèles de n'importe quelle profondeur my-component est imbriqué dans d'autres composants.

/deep/, >>>, et ::shadow peut être utilisé uniquement avec
- encapsulation: ViewEncapsulation.None
- encapsulation: ViewEncapsulation.Emulated
- encapsulation: ViewEncapsulation.Native lorsque le navigateur prend en charge en mode natif (Chrome ne mais affiche un message d'avertissement dans la console qu'ils sont obsolètes) ou
  
  lorsque le navigateur ne prend pas en charge native de l'ombre DOM et de la
  web_components polyfills sont chargés.
Pour un simple exemple voir aussi la Plunker de cette question https://stackoverflow.com/a/36226061/217408

Voir aussi la présentation de ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0
- Si j'utilise /deep/css d'un élément, le css affecte toutes les pages ou uniquement le composant? (Je suis en D3 j'ai donc besoin d'utiliser /de profondeur/, les autres ne fonctionnent pas)
- /deep/ affecte le composant vous permet d'ajouter le CSS et tous ses enfants.
- Ok, donc Si j'utilise un composant pour faire un graphique avec D3 et l'utilisation /deep/ et le "composant parent" appel de cette composante, elle n'affecte d'autres composant parent. Super!
- Non, les parents ou les frères et sœurs ne seront pas touchés. Si elle ne l'utiliser :host /deep/ xxx { }. Cela a changé si souvent depuis que j'ai commencé à l'aide de Angular2 que je ne suis pas sûr de ce que l'état le plus récent est.
- je vous remercie pour cela, Im la mise à niveau de mon code de AngularJS Angulaire 2/5 et il a été un cauchemar. J'ai une question, pourquoi dans les cieux serait-ce le comportement par défaut? Pour le marteau de la feuille de style dans cette voie. Est-ce une fonctionnalité? Si oui, pourquoi? Merci
- Parce que les styles de saignements et de composants toujours causé des ennuis. C'est aussi une étape de préparation pour quand WebComponents becomr nativement pris en charge par tous les navigateurs, puis Angulaire n'aurez pas à faire quelque chose de lui-même et de vos Angulaire code automativally utiliser le navigateur natif de la fonctionnalité.
InformationsquelleAutor Günter Zöchbauer
17

Vous devriez essayer ce,
```
import {ViewEncapsulation} from 'angular2/core';

@Component({
   ...
   encapsulation: ViewEncapsulation.None,
   ...
})
```
- erreur: ReferenceError: ViewEncapsulation n'est pas défini; ai-je besoin de l'importer en tant que bien?
- Désolé. Oublié de dire u à ce sujet. Vérifiez maintenant.
- En fait, j'ai posté cette réponse de mobile donc unble donner u toute autre référence. Mais s'il vous plaît google pour viewencapsulation dans angular2 et je suis sûr que u va apprendre beaucoup de choses sur l'utilisation de css dans angular2.
InformationsquelleAutor micronyks

Vous devez vous connecter pour publier un commentaire.