CSS 由 DOM 属性 _ngcontent-* 与 _nghost-* 引起的 Angular2 样式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37689673/
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 styling issues caused by DOM attributes _ngcontent-* vs. _nghost-*
提问by wzr1337
I have an issue with scss and the cli: angular adds an attribute _nghost-fyw-1to the apps tag (component) during runtime. at the same time it adds an attribute selector to my css called _ngcontent-fyw-1which of course won't work.
我有 scss 和 cli: angular_nghost-fyw-1在运行时向应用程序标记（组件）添加属性的问题。同时，它向我的 css 添加了一个属性选择器，称为_ngcontent-fyw-1这当然不起作用。
Do you have an idea how i could change this behavior/ avoid it?
你知道我如何改变这种行为/避免它吗？
PS: it also applies to regular css.
PS：它也适用于常规 css。
my components .scss file looks like this:
我的组件 .scss 文件如下所示：
my-comp {
h1 {
background-color: red;
}
}
回答by wzr1337
Well,
好，
I found the answer myself. Using the default settings, you must notsupply the wrapping my-compelement selector in the components css.
我自己找到了答案。使用默认设置，您不得my-comp在组件 css 中提供包装元素选择器。
Instead use the *element selector to affect all elements nested in my-comp. Otherwise, angular will treat the my-compselector as an additional element and thus add the _ng-content-*attribute, which of course is not present in the DOM.
而是使用*元素选择器来影响嵌套在my-comp. 否则，angular 会将my-comp选择器视为附加元素，从而添加_ng-content-*属性，这当然不会出现在 DOM 中。
Another option is to disable ViewEncapsulationfor your component - be aware that it just affects the component my-comp
另一种选择是禁用ViewEncapsulation您的组件 - 请注意它只会影响组件my-comp
import {Component, ViewEncapsulation} from 'angular2/core'
@Component({
selector: 'my-comp',
encapsulation: ViewEncapsulation.None,
...
});
https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulationexplains the three different settings modes perfectly.
https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation完美地解释了三种不同的设置模式。
回答by Günter Z?chbauer
update
更新
It's ::ng-deepsince a while.
See also the comments below.
这是::ng-deep因为一段时间。
另请参阅下面的评论。
original
原来的
You didn't provide too much details where you add your styles and what elements you target with the selectors.
您没有提供太多详细信息，您在何处添加样式以及使用选择器定位哪些元素。
The "official" way if you want styles to cross element boundaries is to use >>>like
如果您希望样式跨越元素边界，“官方”方法是使用>>>like
:host >>> h1 {
background-color: red;
}
:hosttargets the current element.>>>(or/deep/) makes Angular ignore_nghost-xxxattributes which is used for component style encapsulation emulation.
:host以当前元素为目标。>>>(或/deep/) 使 Angular 忽略_nghost-xxx用于组件样式封装仿真的属性。
See also Styles in component for D3.js do not show in angular 2
回答by Alejandro Araujo
::ng-deep works for me, adding into app.component.scss:
::ng-deep 对我有用，添加到 app.component.scss 中：
:host ::ng-deep .mat-card {
background: #000 !important;
color: #fff;
}
The documentation (https://angular.io/guide/component-styles) says:
文档（https://angular.io/guide/component-styles）说：
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。在那之前 ::ng-deep 应该是首选，因为它与工具更广泛地兼容。
Use it, with precaution...
小心使用它...
