由 DOM 属性 _ngcontent-* 与 _nghost-* 引起的 Angular2 样式问题
Posted
技术标签:
【中文标题】由 DOM 属性 _ngcontent-* 与 _nghost-* 引起的 Angular2 样式问题【英文标题】:Angular2 styling issues caused by DOM attributes _ngcontent-* vs. _nghost-* 【发布时间】: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;
【问题讨论】:
【参考方案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 应该是首选,以获得更广泛的兼容性 工具。
谨慎使用...
【讨论】:
以上是关于由 DOM 属性 _ngcontent-* 与 _nghost-* 引起的 Angular2 样式问题的主要内容,如果未能解决你的问题,请参考以下文章