web-dev-qa-db-fra.com

Angular2 - ajout de [_ngcontent-mav-x] aux styles

J'installe une application de base angular, et j'essaie d'injecter du CSS dans mes vues. Voici 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, le fichier .css est demandé à mon serveur, et lorsque j'inspecte la source de la page, je peux voir qu'il a été ajouté à la tête. Mais quelque chose d'étrange se produit:

<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 d'où vient la balise _ngcontent-mav, que signifie-t-elle et comment s'en débarrasser?

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

Si vous avez besoin de plus d'informations sur la structure de l'application, veuillez consulter mon gitRepo , ou demandez et j'ajouterai le code à la question.

Merci pour l'aide.

csstypescriptangular
27
Miha Šušteršič

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 déconseillés. ::ng-deep les remplace. ::-deep Est également marqué comme obsolète dans la source et les documents, mais cela signifie qu'il sera également supprimé à terme.

Je pense que cela dépend de ce que le W3C propose pour le thème du DOM fantôme (comme https://tabatkins.github.io/specs/css-shadow-parts/ )

Il s'agit essentiellement d'une solution de contournement jusqu'à ce que tous les navigateurs prennent en charge que nativement et que ViewEncapsulation.Emulated Puisse être entièrement supprimé.

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

original

L'encapsulation de la vue aide à empêcher les styles de pénétrer dans ou hors des composants. L'encapsulation par défaut est ViewEncapsulation.Emulated Où des classes comme _ngcontent-mav-x Sont ajoutées aux balises des composants et les styles sont également réécrits pour ne s'appliquer qu'aux classes correspondantes.

Cela émule dans une certaine mesure le comportement par défaut du DOM fantôme.

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

Une autre façon est les combinateurs CSS de perforation d'ombre récemment (ré) introduits >>>, /deep/ Et ::shadow. Ces combinateurs ont été introduits pour styliser le DOM d'ombre mais y sont déconseillés. Angular introduisez-les récemment jusqu'à ce que d'autres mécanismes comme les variables CSS soient implémentés. Voir aussi https://github.com/angular/angular/pull/756 ( https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17 )

>>> Et /deep/ Sont équivalents et l'utilisation de ces combinateurs fait que les styles ignorent les classes auxiliaires ajoutées (_ngcontent-mav-x)

* >>> my-component, /* same as */
* /deep/ my-component {
  background-color: blue;
}

s'applique à toutes les balises my-component, quelle que soit leur profondeur d'imbrication dans d'autres composants.

some-component::shadow * {
  background-color: green;
}

s'applique à tous les éléments du modèle de some-component, mais pas aux autres descendants.

Ils peuvent également être combinés

* /deep/ my-component::shadow div {
  background-color: blue;
}

cela s'applique à tous les éléments div du modèle de tous les modèles my-component, quelle que soit la profondeur my-component imbriquée dans d'autres composants.

/deep/, >>> Et ::shadow Ne peuvent être utilisés qu'avec

  • encapsulation: ViewEncapsulation.None
  • encapsulation: ViewEncapsulation.Emulated
  • encapsulation: ViewEncapsulation.Native Lorsque le navigateur les prend en charge de manière native (Chrome ne fait qu'imprimer un avertissement dans la console qu'ils sont obsolètes) ou
    lorsque le navigateur ne prend pas en charge nativement le DOM fantôme et que les polyfills web_components sont chargés.

Pour un exemple simple, voir aussi le Plunker de cette question https://stackoverflow.com/a/36226061/217408

Voir également cette présentation de ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs

40
Günter Zöchbauer

Vous devriez essayer ceci,

import {ViewEncapsulation} from 'angular2/core';

@Component({
   ...
   encapsulation: ViewEncapsulation.None,
   ...
})
17
micronyks