Angular2 - 添加[_ngcontent-MAV-X]，以风格 [英] Angular2 - adding [_ngcontent-mav-x] to styles

问题描述

我设置了​​一个基本的角应用程序，我想注入一些CSS来我的看法。这是我的部件中的一个的示例：

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

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

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

有人可以请解释一下其中_ngcontent-MAV标签的来源，这是什么立场，以及如何摆脱它？

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.

如果您需要了解应用程序结构的更多信息，请结帐我的 gitRepo ，还是问我'会增加code的问题。

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

感谢您的帮助。

推荐答案

查看封装有助于prevent风格出血进入或离开组件。默认的封装是 ViewEncapsulation.Emulated 其中类，如 _ngcontent-MAV-X 添加到组件标记，也有风格重写只适用于匹配类。

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.

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

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

您可以禁用此封装加入封装：ViewEncapsulation.None 到 @Component（）装饰

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

另一种方式是最近（重新）引入了阴影直刺CSS组合子＆GT;＆GT;＆GT; ， /深/ 和 ::阴影。这些组合子分别介绍了造型的影子DOM，但德precated那里。最近角介绍他们，直到像CSS变量其他机制来实现。
另请参见 https://github.com/angular/angular/pull/7563 （< A HREF =htt​​ps://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17 rel=\"nofollow\">https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

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)

＆GT;＆GT;＆GT; 和 /深/ 是等价的，用这个组合子使样式忽略添加辅助类（ _ngcontent-MAV-X ）

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

适用于所有的元素一些组件，但未进一步后裔。

它们也可以组合

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

这适用于所有的模板中的所有div元素我的分量模板不管有多深我的分量嵌套在其它组分

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.

/深/ ，＆GT;＆GT;＆GT; 和 ::阴影只能与使用

• 封装：ViewEncapsulation.None


• 封装：ViewEncapsulation.Emulated


• 封装：ViewEncapsulation.Native当浏览器支持他们本身（Chrome并打印，但在他们去precated控制台的警告）或结果
  当浏览器不支持原生DOM阴影和
  web_components polyfills被加载。

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

对于一个简单的例子也是 Plunker 看到这个问题，<一个HREF =htt​​p://stackoverflow.com/a/36226061/217408> http://stackoverflow.com/a/36226061/217408

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

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