Angular2-añadiendo [ngcontent-mav-x] a los estilos

Question

Angular2-añadiendo [ngcontent-mav-x] a los estilos

Estoy configurando una aplicación angular básica, y estoy tratando de inyectar algo de css a mis vistas. Este es un ejemplo de uno de mis componentes:

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 { }

Ahora el.el archivo css se solicita de mi servidor, y cuando inspecciono la fuente de página, puedo ver que se agregó a la cabeza. Pero algo extraño está sucediendo:

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

Se genera a partir de este archivo:

/* 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%;
    }
}

¿Puede alguien explicar de dónde viene la etiqueta _ngcontent-mav, qué significa y cómo deshacerse de ella ¿eso?

Creo que esta es la razón por la que mi estilo no se está aplicando a mis plantillas.

Si necesita más información sobre la estructura de la aplicación, por favor consulte mi gitRepo, o pregunte y agregaré el código a la pregunta.

Gracias por la ayuda.

25

css typescript angular

Author: Miha Šušteršič, 2016-03-25

Source

2 answers

Deberías probar esto,

 import {ViewEncapsulation} from 'angular2/core';

 @Component({
   ...
    encapsulation: ViewEncapsulation.None,
   ...

  })

14

Author: micronyks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-25 17:16:15

score 37 · Accepted Answer

Update2

::slotted ahora es compatible con todos los navegadores nuevos y se puede utilizar con ' ViewEncapsulation.ShadowDOM

Https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Update

/deep/ y >>> están en desuso. ::ng-deep los reemplaza. ::-deep también está marcado como obsoleto en el código fuente y los documentos, pero esto significa que también se eliminará eventualmente.

Creo que depende de lo que se le ocurra al W3C para tematizar la sombra DOM (como https://tabatkins.github.io/specs/css-shadow-parts/)

Es básicamente una solución alternativa hasta que todos los navegadores admiten que de forma nativa y ViewEncapsulation.Emulated se pueden eliminar por completo.

::ng-deep también es compatible con SASS (o lo será, dependiendo de la implementación de SASS)

Original

La encapsulación de vista ayuda a prevenir el sangrado de estilos dentro o fuera de los componentes. La encapsulación predeterminada es ViewEncapsulation.Emulated donde clases como _ngcontent-mav-x se agregan a las etiquetas de componentes y también se reescriben los estilos para que solo se apliquen a las clases coincidentes.

Esto emula hasta cierto punto el comportamiento predeterminado del DOM de sombras.

Puede desactivar esta encapsulación añadiendo encapsulation: ViewEncapsulation.None al decorador @Component().

Otra forma es el recientemente (re)introducido shadow piercing CSS combinators >>>, /deep/, y ::shadow. Estos combinadores se introdujeron para el estilo shadow DOM, pero están en desuso allí. Angular introducirlos recientemente hasta se implementan otros mecanismos como las variables CSS. Ver también https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> y /deep/ son equivalentes y el uso de estos combinadores hace que los estilos ignoren las clases auxiliares agregadas(_ngcontent-mav-x)

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

Se aplica a todas las etiquetas my-component sin importar cuán profundas estén anidadas en otros componentes.

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

Se aplica a todos los elementos de la plantilla de some-component, pero no más descendientes.

También se pueden combinar

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

Esto se aplica a todos los elementos div en la plantilla de todas las plantillas my-component sin importar cuán profundo esté anidado my-component en otros componentes.

/deep/, >>>, y ::shadow solo se puede usar con

encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.Emulated
encapsulation: ViewEncapsulation.Native cuando el navegador los admite de forma nativa (Chrome lo hace pero imprime una advertencia en la consola de que están obsoletos) o
cuando el navegador no es compatible con shadow DOM y el se cargan los polyfills de web_components.

Para un ejemplo simple, véase también el Émbolo de esta pregunta https://stackoverflow.com/a/36226061/217408

Ver también esta presentación de ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0