Css Angular2-向样式添加[\u ngcontent-mav-x]

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

有人能解释一下_ngcontent-mav标签来自何处，它代表什么以及如何摆脱它吗

我想这就是为什么我的风格没有被应用到我的模板中的原因

如果您需要有关应用程序结构的更多信息，请签出我的，或者询问，我会将代码添加到问题中

谢谢你的帮助。

你应该试试这个

import {ViewEncapsulation} from 'angular2/core';

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

---

更新2

：：slotted

现在受到所有新浏览器的支持，并可与`ViewEncapsulation.ShadowDom一起使用

更新

/deep/

和

>

不推荐使用。

：ng deep

替换它们<代码>：-deep在源代码和文档中也被标记为不推荐，但这意味着它最终也将被删除

我认为这取决于W3C提出的阴影DOM主题（如）

这基本上是一个解决办法，直到所有浏览器都支持本机和

视图封装。可以完全删除模拟的

：ng deep
在SASS中也受支持（或将受支持，具体取决于SASS实现）

原创

视图封装有助于防止样式流入或流出组件。默认封装为
视图封装。模拟的
将
\ngcontent-mav-x
之类的类添加到组件标记，并重写样式以仅应用于匹配的类

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

您可以通过向
@Component（）

另一种方法是最近（重新）引入的阴影穿透CSS组合器
>
，
/deep/
，和
：：shadow
。这些组合器是为设置阴影DOM的样式而引入的，但在这里不推荐使用。Angular最近引入了它们，直到实现了CSS变量等其他机制。
另见（）

>
和
/deep/
是等效的，使用此组合符会使样式忽略添加的帮助器类（
\ngcontent-mav-x
）

适用于所有
my component
标记，无论它们嵌套在其他组件中有多深

some-component::shadow * {
  background-color: green;
} 

适用于
某些组件的模板中的所有元素，但不适用于进一步的子体

它们也可以结合在一起

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

这适用于所有
my component
模板中的所有div元素，无论
my component
嵌套在其他组件中有多深

some-component::shadow * {
  background-color: green;
} 

/deep/
、
和
：：shadow
只能与一起使用


封装：视图封装。无

封装：视图封装。仿真

enclosuration:viewenclosuration.Native
当浏览器以本机方式支持它们时（Chrome会这样做，但会在控制台中打印一条警告，表示它们已被弃用）或

当浏览器本机不支持阴影DOM和
web_组件将加载多边形填充

有关一个简单的示例，请参见此问题中的

另请参见ng conf 2016中的此演示文稿
默认封装为，请检查它。错误：ReferenceError:未定义视图封装；我也需要导入吗？对不起。忘了告诉你那件事了。现在检查。我实际上已经从手机上发布了这个答案，所以不可能给你任何进一步的参考。但是请用谷歌搜索angular2的视图封装，我相信你会学到很多关于在angular2中使用css的东西。如果我在组件的css中使用/deep/的话，css会影响所有页面还是只影响组件？（我正在使用D3，所以我需要使用/deep/，其他组件不起作用）
/deep/
影响添加CSS的组件及其所有子组件。好的，如果我使用一个组件与D3生成一个图形，并使用
/deep/
，并且“父组件”调用此组件，它不会影响其他父组件。伟大的不，父母或兄弟姐妹不会受到影响。如果它确实使用了
：host/deep/xxx{}
。自从我开始使用Angular2以来，这种情况经常发生变化，我不确定最近的状态是什么。@GünterZöchbauer谢谢你，我正在将我的代码从AngularJS升级到Angular2/5，这真是一场噩梦。我有一个问题，为什么这会是默认行为？以这种方式敲打样式表。这是一个功能吗？如果是，为什么？非常感谢。
* /deep/ my-component::shadow div {
  background-color: blue;
}