Angular2 - 将[_ngcontent-mav-x]添加到样式中

Question

我正在设置一个基本的角度应用程序,我正在尝试为我的观点注入一些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,或者询问并将我的代码添加到问题中.

谢谢您的帮助.

Answer 1

UPDATE2

::slotted 现在所有新浏览器都支持它,并且可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

更新

/deep/并且>>>已弃用. ::ng-deep取代他们.::-deep在源和文档中也标记为已弃用,但这意味着它也将最终被删除.

我认为这取决于W3C为影子DOM提供的内容(如https://tabatkins.github.io/specs/css-shadow-parts/)

它基本上是一种解决方法,直到所有浏览器本机支持并且ViewEncapsulation.Emulated可以完全删除.

::ng-deep SASS也支持(或者将取决于SASS实施)

原版的

视图封装有助于防止样式流入或流出组件.默认封装是ViewEncapsulation.Emulated将类似_ngcontent-mav-x的类添加到组件标记中,并且还重写样式以仅应用于匹配的类.

这在某种程度上模拟了shadow 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会在控制台中输出不允许使用它们的警告),或者
  浏览器本身不支持shadow DOM并且加载了web_components polyfill.

有关简单示例,请参阅此问题中的Plunker /sf/answers/2535824301/

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

Answer 2

你应该试试这个,

import {ViewEncapsulation} from 'angular2/core';

@Component({
   ...
   encapsulation: ViewEncapsulation.None,
   ...
})