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

Question

我正在设置一个基本的 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 { }

现在从我的服务器请求 .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

你应该试试这个，

import {ViewEncapsulation} from 'angular2/core';

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

Answer 2

更新2

::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 之类的类被添加到组件标签中，并且样式被重写为仅适用于匹配的类。

这在某种程度上模拟了影子 DOM 的默认行为。

您可以禁用此封装，将encapsulation: ViewEncapsulation.None 添加到@Component() 装饰器。

另一种方法是最近（重新）引入的阴影穿透 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)

>>> 和 /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 polyfills 已加载。

对于一个简单的例子，另请参阅这个问题https://stackoverflow.com/a/36226061/217408中的Plunker

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