typescript Angular2 - 将 [_ngcontent-mav-x] 添加到样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36224276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 - adding [_ngcontent-mav-x] to styles
提问by Miha ?u?ter?i?
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:
我正在设置一个基本的 angular 应用程序，并且正在尝试向我的视图中注入一些 css。这是我的组件之一的示例：
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:
现在从我的服务器请求 .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>
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?
有人可以解释 _ngcontent-mav 标签的来源，它代表什么以及如何摆脱它？
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.
如果您需要有关应用程序结构的更多信息，请查看我的gitRepo，或者询问，我会将代码添加到问题中。
Thanks for the help.
谢谢您的帮助。
回答by Günter Z?chbauer
update2
更新2
::slottedis now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
::slotted现在所有新浏览器都支持，并且可以与`ViewEncapsulation.ShadowDom 一起使用
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
update
更新
/deep/and >>>are deprecated.
::ng-deepreplaces them. ::-deepis also marked deprecated in source and the docs, but this means that it will also be removed eventually.
/deep/并>>>已弃用。
::ng-deep替换它们。::-deep在源代码和文档中也被标记为已弃用，但这意味着它最终也将被删除。
I think it depends on what W3C comes up with for theming the shadow DOM (like https://tabatkins.github.io/specs/css-shadow-parts/)
我认为这取决于 W3C 提出的用于主题化 shadow DOM 的内容（例如https://tabatkins.github.io/specs/css-shadow-parts/）
It's basically a workaround until all browsers support that natively and ViewEncapsulation.Emulatedcan be removed entirely.
这基本上是一种解决方法，直到所有浏览器都原生支持并且ViewEncapsulation.Emulated可以完全删除。
::ng-deepis also supported in SASS (or will be, depending on the SASS implementation)
::ng-deepSASS 也支持（或将支持，取决于 SASS 实现）
original
原来的
View encapsulation helps to prevent styles bleeding into or out of components. The default encapsulation is ViewEncapsulation.Emulatedwhere classes like _ngcontent-mav-xare added to component tags and also styles are rewritten to only apply to matching classes.
视图封装有助于防止样式流入或流出组件。默认封装是ViewEncapsulation.Emulated将类_ngcontent-mav-x添加到组件标签中，并且样式也被重写为仅适用于匹配的类。
This emulates to some degree the default behavior of the shadow DOM.
这在某种程度上模拟了 shadow DOM 的默认行为。
You can disable this encapsulation adding encapsulation: ViewEncapsulation.Noneto the @Component()decorator.
您可以禁用此封装添加encapsulation: ViewEncapsulation.None到@Component()装饰器。
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)
另一种方式是最近（重新）引入影子穿孔CSS组合程序>>>，/deep/和::shadow。这些组合器被引入用于样式化 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)
>>>and /deep/are equivalent and using this combinators makes the styles ignore the the added helper classes (_ngcontent-mav-x)
>>>and/deep/是等价的，使用这个组合器使样式忽略添加的帮助类 ( _ngcontent-mav-x)
* >>> my-component, /* same as */
* /deep/ my-component {
background-color: blue;
}
applies to all my-componenttags not matter how deep they are nested in other components.
适用于所有my-component标签，无论它们在其他组件中嵌套多深。
some-component::shadow * {
background-color: green;
}
applies to all elements in the template of some-component, but not further descendants.
适用于 的模板中的所有元素some-component，但不适用于进一步的后代。
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-componenttemplates no matter how deep my-componentis nested in other components.
这适用于所有模板的my-component模板中的所有 div 元素，无论my-component在其他组件中嵌套多深。
/deep/, >>>, and ::shadowcan only be used with
/deep/, >>>, 并且::shadow只能与
encapsulation: ViewEncapsulation.Noneencapsulation: ViewEncapsulation.Emulatedencapsulation: ViewEncapsulation.Nativewhen 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.
encapsulation: ViewEncapsulation.Noneencapsulation: ViewEncapsulation.Emulatedencapsulation: ViewEncapsulation.Native当浏览器本机支持它们时（Chrome 确实但在控制台中打印了它们已弃用的警告），或者
当浏览器不本机支持 shadow DOM 并且加载了 web_components polyfills 时。
For a simple example see also the Plunkerfrom this question https://stackoverflow.com/a/36226061/217408
有关一个简单的示例，另请参阅此问题中的Plunker https://stackoverflow.com/a/36226061/217408
See also this presentation from ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0
另请参阅 ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0 中的此演示文稿
回答by micronyks
You should try this,
你应该试试这个
import {ViewEncapsulation} from 'angular2/core';
@Component({
...
encapsulation: ViewEncapsulation.None,
...
})
