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