由 DOM 属性 _ngcontent-* 与 _nghost-* 引起的 Angular2 样式问题答案

【问题标题】：Angular2 styling issues caused by DOM attributes _ngcontent-* vs. _nghost-*由 DOM 属性 _ngcontent-* 与 _nghost-* 引起的 Angular2 样式问题
【发布时间】：2016-10-07 23:09:00
【问题描述】：

我遇到了 scss 和 cli: angular 在运行时向应用程序标签（组件）添加属性 _nghost-fyw-1 的问题。同时，它在我的 CSS 中添加了一个名为 _ngcontent-fyw-1 的属性选择器，这当然是行不通的。

你知道我可以如何改变/避免这种行为吗？

PS：它也适用于常规 css。

我的组件 .scss 文件如下所示：

my-comp {
  h1 {
    background-color: red;
  }
}

【问题讨论】：

标签： css angular sass

【解决方案1】：

嗯，

我自己找到了答案。使用默认设置，您不得在组件 css 中提供包装 my-comp 元素选择器。

改为使用* 元素选择器来影响嵌套在my-comp 中的所有元素。否则，Angular 会将my-comp 选择器视为附加元素，从而添加_ng-content-* 属性，这在DOM 中当然不存在。

另一个选项是为您的组件禁用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-encapsulation完美诠释了三种不同的设置模式。

【讨论】：

我不明白第一部分。为什么要使用*？这不是:host 的用途吗？无论如何，ViewEncapsulation.None 在使用古老的语法高亮显示时救了我一命。 +1
换句话说。在组件声明选项中设置{ encapsulation: ViewEncapsulation.None } 。

【解决方案2】：

更新

很久以前是::ng-deep。
另请参阅下面的 cmets。

原创

您没有提供太多详细信息，您在哪里添加样式以及您使用选择器定位哪些元素。

如果您希望样式跨越元素边界，“官方”方法是使用>>> like

:host >>> h1 {
  background-color: red;
}

:host 以当前元素为目标。
>>>（或/deep/）使Angular忽略用于组件样式封装模拟的_nghost-xxx属性。

另见Styles in component for D3.js do not show in angular 2

【讨论】：

（已弃用）/deep/、>>> 和 ::ng-deep angular.io/guide/component-styles
您可以忽略该弃用。在有替代品之前它不会消失。
永远不会有通用的穿透阴影选择器操作符的替代品，因为它违背了样式封装的目标。 ::part 和 ::theme 提供了一个可行但不等效的替代方案。
@MaxArt 你当然是对的，但是这几年才慢慢出现。当我发布答案时，::part 和 ::theme 还没有被发明出来。与此同时，我讨论了一个slotted。不知道那去了哪里。很久没关注这里的开发了。
很公平，这只是对那些看到您的答案并仍然希望未来的人的提醒。当然，:ng-deep 仍然在 Angular 8 中工作。关于最后一部分，您指的是::slotted pseudo-element 吗？在这种情况下，一旦 Edge 成为基于 Chromium 的工具，它将获得普遍支持?

【解决方案3】：

::ng-deep 对我有用，添加到 app.component.scss:

:host ::ng-deep .mat-card {
    background: #000 !important;
    color: #fff;
}

文档 (https://angular.io/guide/component-styles) 说：

不推荐使用穿透阴影的后代组合器，支持被从主要浏览器和工具中删除。因此，我们计划放弃 Angular 中的支持（适用于 /deep/、>>> 和 ::ng-deep 的所有 3 个）。直到那么 ::ng-deep 应该是首选，以获得更广泛的兼容性工具。

谨慎使用...

【讨论】：