Angular2-在样式中添加[_ngcontent-mav-x]
我正在设置一个基本的角度应用程序,并且试图在视图中添加一些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 { }
现在,从服务器请求了.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>
从此文件生成:
/* 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标记的来源,代表什么以及如何摆脱它吗?
我认为这就是为什么我的样式未应用到模板的原因。
如果您需要有关应用程序结构的更多信息,请签出我的gitRepo,或询问,然后将代码添加到问题中。
谢谢您的帮助。
回答:
::slotted
现在,所有新浏览器都支持该功能,并且可以与`ViewEncapsulation.ShadowDom一起使用
https://developer.mozilla.org/zh-
CN/docs/Web/CSS/::slotted
/deep/
并>>>
已弃用。
取代它们。::-deep
在源代码和文档中也被标记为已弃用,但这意味着它最终也会被删除。
我认为这取决于W3C为阴影DOM设置主题的方式(例如https://tabatkins.github.io/specs/css-shadow-
parts/)
基本上,这是一种变通方法,直到所有浏览器都本机支持并且ViewEncapsulation.Emulated
可以将其完全删除。
::ng-deep
在SASS中也受支持(或将取决于SASS实现)
视图封装有助于防止样式渗入或渗出组件。默认封装是ViewEncapsulation.Emulated
将类之类_ngcontent-
mav-x
添加到组件标签中,并且样式也将重写为仅适用于匹配的类。
这在某种程度上模拟了影子DOM的默认行为。
您可以禁用此封装添加encapsulation: ViewEncapsulation.None
到@Component()
装饰器。
另一种方式是最近(重新)引入影子穿孔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, /* same as */* /deep/ my-component {
background-color: blue;
}
应用于所有my-component
标签,无论它们在其他组件中嵌套的深度如何。
some-component::shadow * { background-color: green;
}
适用于模板中的所有元素some-component
,但不适用于其他后代。
它们也可以合并
* /deep/ my-component::shadow div { background-color: blue;
}
这适用于所有模板的my-component
模板中的所有div元素,无论my-component
嵌套在其他组件中的深度如何。
/deep/
,>>>
和::shadow
只能与
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.Emulated
encapsulation: ViewEncapsulation.Native
当浏览器本身支持它们时(Chrome会支持,但会在控制台中显示警告,表明它们已弃用),或者浏览器本身不支持影子DOM并加载了web_components polyfills时。
对于一个简单的示例,也请参阅此问题中的Plunker
https://stackoverflow.com/a/36226061/217408
另请参阅ng-conf
2016上的此演示文稿
以上是 Angular2-在样式中添加[_ngcontent-mav-x] 的全部内容, 来源链接: utcz.com/qa/420494.html