由 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 样式问题的主要内容,如果未能解决你的问题,请参考以下文章

DOM查找与操作(document)_js

Web前端面试题第六道—链接标记target与Dom,Bom

js_9_dom属性

React学习_03_虚拟DOM和key属性

DOM_04

如何解释 D3 附加到 DOM 元素的 __transition__ 属性作为过渡的一部分?