2016-03-25 39 views
21

Sto configurando un'app angolare di base e sto cercando di iniettare qualche css alle mie viste. Questo è un esempio di uno dei miei componenti:Angular2 - aggiunta [_ngcontent-mav-x] agli stili

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

Ora il file css viene richiesto dal mio server, e quando ho ispezionare il sorgente della pagina, posso vedere che è stato aggiunto alla testa. Ma qualcosa di strano sta succedendo:

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

ottiene generato da questo file:

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

Qualcuno può spiegare in cui il tag _ngcontent-MAV proviene, cosa rappresentiamo e come sbarazzarsi di vero?

Penso che questo sia il motivo per cui il mio stile non viene applicato ai miei modelli.

Se avete bisogno di maggiori informazioni sulla struttura dell'app, si prega di controllare il mio gitRepo, o chiedere e aggiungerò il codice alla domanda.

Grazie per l'aiuto.

+0

L'incapsulamento di default è [ViewEncapsulation # emulata] (https: // angolare .io/docs/ts/latest/api/core/ViewEncapsulation-enum.html), dai un'occhiata. –

risposta

32

aggiornamento

/deep/ e >>> sono deprecati. ::ng-deep sostituisce. ::-deep è anche contrassegnato come deprecato in source e docs, ma questo significa che sarà alla fine ma non è chiaro cosa lo sostituirà. Credo che dipende da quello W3C esce con per tematizzazione DOM ombra (come https://tabatkins.github.io/specs/css-shadow-parts/)

::ng-deep è supportata anche in SASS (o saranno, in funzione dell'implementazione SASS)

originale

L'incapsulamento delle viste aiuta a prevenire il sanguinamento degli stili all'interno o all'esterno dei componenti. L'incapsulamento predefinito è ViewEncapsulation.Emulated dove classi come _ngcontent-mav-x vengono aggiunte ai tag componente e anche gli stili vengono riscritti per applicarsi solo alle classi corrispondenti.

Questo emula in parte il comportamento predefinito del DOM ombra.

È possibile disattivare questo incapsulamento aggiungendo encapsulation: ViewEncapsulation.None al decoratore @Component().

Un altro modo è la recente (ri) introduzione di combinatori di CSS piercing ombra >>>, /deep/ e ::shadow. Questi combinatori sono stati introdotti per lo styling shadow DOM ma sono deprecati lì. Angular li presenta di recente fino a quando non vengono implementati altri meccanismi come le variabili CSS. Vedi anche https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> e /deep/ sono equivalenti ed utilizzare il combinatori rende gli stili ignorano le classi helper aggiunti (_ngcontent-mav-x)

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

applica a tutti i my-component tag non importa quanto in profondità sono annidato in altri componenti.

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

si applica a tutti gli elementi nel modello di some-component, ma non altrimenti discendenti.

Possono anche essere combinati

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

questo vale per tutti gli elementi div nel modello di tutte le my-component modelli non importa quanto in profondità my-component è nidificato in altri componenti.

/deep/, >>>, e ::shadow può essere utilizzato solo con

  • encapsulation: ViewEncapsulation.None
  • encapsulation: ViewEncapsulation.Emulated
  • encapsulation: ViewEncapsulation.Native quando il browser li supporta in modo nativo (Chrome fa ma stampa un avvertimento nella console che sono deprecati) o
    quando il browser non supporta i DOM ombra shadow e vengono caricati i polyfill dei componenti web .

Per un semplice esempio si veda anche il Plunker da questa domanda https://stackoverflow.com/a/36226061/217408

Vedi anche questa presentazione da NG-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0

+0

Se utilizzo/deep/in css di un componente, il css ha effetto su tutte le pagine o solo sul componente? (Sto usando D3 quindi avevo bisogno di usare/deep /, gli altri non funzionavano) – albert

+1

'/ deep /' colpisce il componente in cui si aggiunge il CSS e tutti i suoi figli. –

+0

Ok, quindi se uso un componente per creare un grafico con D3 e uso '/ deep /' e il "componente genitore" chiama questo componente, non ha alcun effetto sull'altro componente genitore. Grande! – albert

7

Si dovrebbe provare questo,

import {ViewEncapsulation} from 'angular2/core'; 

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

    }) 
+0

errore: ReferenceError: ViewEncapsulation non è definito; Devo importarlo anche io? –

+0

Siamo spiacenti. Ho dimenticato di parlartene. Adesso controlla. – micronyks

+0

Ho effettivamente postato questa risposta dal cellulare così inafferrabile da darti qualsiasi ulteriore riferimento. Ma per favore google per viewencapsulation in angular2 e sono sicuro che imparerai molte cose sull'utilizzo di css in angular2. – micronyks

Problemi correlati