Problemi di stile Angular2 causati dagli attributi DOM _ngcontent- * vs. _nghost- *

Question

Ho un problema con scss e il cli: angular aggiunge un attributo _nghost-fyw-1 al tag apps (componente) durante il runtime. allo stesso tempo aggiunge un selettore di attributo al mio css chiamato _ngcontent-fyw-1 che ovviamente non funzionerà.

Hai un'idea di come potrei cambiare questo comportamento/evitarlo?

PS: si applica anche ai normali css. file di

miei componenti .scss assomiglia a questo:

my-comp { 
    h1 { 
    background-color: red; 
    } 
} 

Answer 1

Beh,

mi sono trovato la risposta. Utilizzando le impostazioni predefinite, è necessario che non sia fornire il selettore di wrapping my-comp nell'elemento css.

Utilizzare invece il selettore di elementi * per influire su tutti gli elementi nidificati in my-comp. In caso contrario, angolare tratterà il selettore my-comp come un elemento aggiuntivo e quindi aggiungerà l'attributo _ng-content-*, che ovviamente non è presente nel DOM.

Un'altra opzione è quella di disabilitare ViewEncapsulation per il componente - essere consapevoli che colpisce solo la componente my-comp

import {Component, ViewEncapsulation} from 'angular2/core' 

@Component({ 
    selector: 'my-comp', 
    encapsulation: ViewEncapsulation.None, 
    ... 
}); 

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation spiega le tre diverse modalità di impostazioni perfettamente.

Answer 2

Non hai fornito troppi dettagli in cui aggiungi i tuoi stili e quali elementi scegli come target con i selettori.

Il modo "ufficiale" se si desidera che gli stili per i confini degli elementi trasversali è quello di utilizzare >>> come

:host >>> h1 { 
    background-color: red; 
} 

• :host obiettivi l'elemento corrente.
• >>> (o /deep/) rende Angolare ignora gli attributi _nghost-xxx che viene utilizzato per l'emulazione di incapsulamento stile componente.

Vedi anche Styles in component for D3.js do not show in angular 2