DOM属性_ngcontent- *与_nghost- *引起的Angular2样式问题 [英] Angular2 styling issues caused by DOM attributes _ngcontent-* vs. _nghost-*

问题描述

我在使用scss和cli时遇到问题:angular在运行时将属性_nghost-fyw-1添加到apps标记(组件).同时，它将一个属性选择器添加到我的CSS中，名为_ngcontent-fyw-1，这当然是行不通的.

I have an issue with scss and the cli: angular adds an attribute _nghost-fyw-1 to the apps tag (component) during runtime. at the same time it adds an attribute selector to my css called _ngcontent-fyw-1 which of course won't work.

您知道我如何更改/避免这种行为吗?

Do you have an idea how i could change this behavior/ avoid it?

PS:它也适用于常规CSS.

PS: it also applies to regular css.

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

my components .scss file looks like this:

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

推荐答案

嗯，

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

I found the answer myself. Using the default settings, you must not supply the wrapping my-comp element selector in the components css.

代替使用*元素选择器来影响嵌套在my-comp中的所有元素.否则，angular会将my-comp选择器视为附加元素，并因此添加_ng-content-*属性，该属性当然不在DOM中.

Instead use the * element selector to affect all elements nested in my-comp. Otherwise, angular will treat the my-comp selector as an additional element and thus add the _ng-content-* attribute, which of course is not present in the DOM.

另一种选择是禁用组件的ViewEncapsulation-请注意，这只会影响组件my-comp

Another option is to disable ViewEncapsulation for your component - be aware that it just affects the component my-comp

import {Component, ViewEncapsulation} from 'angular2/core'

@Component({
  selector: 'my-comp',
  encapsulation: ViewEncapsulation.None,
  ...
});

https://egghead. io/lessons/angular-2-control-styles如何与视图封装共享完美地解释了三种不同的设置模式.

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation explains the three different settings modes perfectly.

这篇关于DOM属性_ngcontent- *与_nghost- *引起的Angular2样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！