Angular2 - 添加[_ngcontent-mav-x]到样式 [英] Angular2 - adding [_ngcontent-mav-x] to styles

问题描述

我设置了一个基本的角度应用程序，我试图注入一些CSS我的意见。这是我的一个组件的例子：

  import {component} from'angular2 / core' 
 import'ROUTER_PROVIDERS，ROUTER_DIRECTIVES，RouteConfig} from'angular2 / router'; 
 
 import {LandingComponent}从'./landing.component'; 
 import {PortfolioComponent} from'./portfolio.component'; 
 
 @Component（{
 selector：'portfolio-app'，
 templateUrl：'/app/views/template.html'，
 styleUrls：['。 ./app/styles/template.css']，
指令：[ROUTER_DIRECTIVES]，
 providers：[ROUTER_PROVIDERS] 
}）
 
 @RouteConfig（[
 {path：'/ landing'，name：'Landing'，component：LandingComponent，useAsDefault：true}，
 {path：'/ portfolio'，name：'Portfolio'，component：PortfolioComponent} 
]）
 
 export class AppComponent {} 
  

现在.css文件是从我的服务器请求的，当我检查页面源，我可以看到它被添加到头。但有些奇怪的事情正在发生：

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

从此文件生成：

  / *小设备（平板电脑，768像素及以上）* / 
 
 @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％; 
} 
} 
  

有人请解释_ngcontent-mav标记从，它代表什么，如何摆脱它？

我认为这是为什么我的风格不适用于我的模板。

如果您需要有关应用程序结构的更多信息，请查看我的 gitRepo ，或者询问，我将在问题中添加代码。

感谢您的帮助。

解决方案

视图封装有助于防止样式流入或流出组件。默认封装为 ViewEncapsulation.Emulated ，其中类 _ngcontent-mav-x 添加到组件标记中，重写为仅适用于匹配类。

这在一定程度上模拟了阴影DOM的默认行为。

您可以禁用此封装向 @Component（）装饰器添加封装：ViewEncapsulation.None

另一种方法是最近（重新）引入了阴影穿孔CSS组合器>>> ， / deep / 和 :: shadow 。这些组合器被引入用于风格DOM的风格，但在那里已被弃用。 Angular介绍他们最近，直到其他机制像CSS变量实现。
另请参见 https://github.com/angular/angular/pull/7563 （ https://github.com/angular/angular/blob/master/ CHANGELOG.md＃200-beta10-2016-03-17 ）

>>> 和 / deep / 是等价的，使用这个组合器使样式忽略添加的辅助类（ _ngcontent-mav-x ）

  *>>> my-component，/ *与* / 
 * / deep / my-component {
 background-color：blue; 
} 
  

适用于所有 my-component 标签无关它们嵌套在其他组件中的深浅程度。

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

适用于模板中的所有元素

它们也可以组合

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

这适用于模板中的所有div元素

$ my-component

/ deep / ，>>> 和 :: shadow 只能用于

• encapsulation：ViewEncapsulation.None


• encapsulation：ViewEncapsulation.Emulated
ViewEncapsulation.Native ，当浏览器本机支持它们（Chrome会在控制台中打印它们被弃用的警告）或

当浏览器不支持shadow DOM和
web_components polyfills已加载。

有关简单示例，请参阅 Plunker 从此问题 http://stackoverflow.com/a/ 36226061/217408

另请参阅来自ng-conf 2016的此演示文稿 https://www.youtube.com/watch?v=J5Bvy4KhIs0

I'm setting up a basic angular app, and I'm trying to inject some css to my views. This is an example of one of my components:

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

Now the .css file is requested from my server, and when I inspect the page source, I can see it was added to the head. But something weird is happening:

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

gets generated from this 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%;
    }
}

Can somebody please explain where the _ngcontent-mav tag comes from, what does it stand for and how to get rid of it?

I think this is the reason why my style is not getting applied to my templates.

If you need more info about the app structure, please checkout my gitRepo, or ask and I'll add the code to the question.

Thanks for the help.

解决方案

View encapsulation helps to prevent styles bleeding into or out of components. The default encapsulation is ViewEncapsulation.Emulated where classes like _ngcontent-mav-x are added to component tags and also styles are rewritten to only apply to matching classes.

This emulates to some degree the default behavior of the shadow DOM.

You can disable this encapsulation adding encapsulation: ViewEncapsulation.None to the @Component() decorator.

Another way is the recently (re-)introduced shadow piercing CSS combinators >>>, /deep/, and ::shadow. These combinators were introduced for styling shadow DOM but are deprecated there. Angular introduce them recently until other mechanisms like CSS variables are implemented. See also https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> and /deep/ are equivalent and using this combinators makes the styles ignore the the added helper classes (_ngcontent-mav-x)

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

applies to all my-component tags not matter how deep they are nested in other components.

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

applies to all elements in the template of some-component, but not further descendants.

They can also be combined

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

this applies to all div elements in the template of all my-component templates no matter how deep my-component is nested in other components.

/deep/, >>>, and ::shadow can only be used with

• encapsulation: ViewEncapsulation.None
• encapsulation: ViewEncapsulation.Emulated
• encapsulation: ViewEncapsulation.Native when the browser supports them natively (Chrome does but prints a warning in the console that they are deprecated) or
  when the browser doesn't native support shadow DOM and the web_components polyfills are loaded.

For a simple example see also the Plunker from this question http://stackoverflow.com/a/36226061/217408

See also this presentation from ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0

这篇关于Angular2 - 添加[_ngcontent-mav-x]到样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！