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

Question

我遇到了scss问题，而cli：angular在运行时期间向apps标记（组件）添加了一个属性_nghost-fyw-1。同时它为我的css添加了一个名为_ngcontent-fyw-1的属性选择器，当然这不会起作用。

你知道我怎么能改变这种行为/避免它吗？

PS：它也适用于普通的CSS。

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

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

Answer 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完美地解释了三种不同的设置模式。

Answer 2

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

如果您希望样式跨越元素边界，那么“官方”方式是使用>>>之类的

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

• :host定位当前元素。
• >>>（或/deep/）使Angular忽略_nghost-xxx属性，用于组件样式封装模拟。

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

Answer 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应该是首选，以便与   工具。

请谨慎使用...