在 Less 样式表中使用 Angular 组件名称与生成的 DOM 不匹配

Question

我正在学习 Angular Udemy 课程，我的风格是这样的：

server dl {
    display: flex;
}

和 server 组件，它不起作用。该样式不适用于 html。因为生成的样式如下所示：

server[_ngcontent-c1]   dl[_ngcontent-c1] {
  display: flex;
}

和DOM看起来像这样：

<server _ngcontent-c0="" _nghost-c1="">
   <dl _ngcontent-c1="">
     <dt _ngcontent-c1="">Plantform</dt>
     <dd _ngcontent-c1="">Linux x86_64</dd>
   </dl>
</server>

_ngcontent-c0 而不是 _ngcontent-c1，为什么会这样？为什么样式不匹配 DOM?

我正在使用由 CLI 生成的 Angular 应用程序和 Less（但我使用 server 作为选择器手动创建了组件，如果名称为 app-server 也会发生同样的情况).

为什么添加这个属性选择器？如果我在不同的地方使用这个组件呢？我想匹配组件内的所有元素，这就是为什么我添加了 server 作为选择器以始终匹配该组件内的所有元素。

如何使用添加到 html 的组件名称作为我整个样式的根？或者这在 Angular 中不是很好的做法，这是以其他方式处理的，如果有人可以解释一下？

Answer 1

您可以在 class.
下面使用 .TS 文件这是删除所有这些_ngcontent

 @Component
   selector,
   template,
   styles,

此代码encapsulation: ViewEncapsulation.None

Answer 2

组件的每个元素都由 angular（根据 css spec for scoping）使用您注意到的那些属性自动限定范围/填充。所以基本上，当你为那个组件写 css 时你不必写 component-name element 但你可以只写：

dl {
    display: flex
}

Angular 将通过使用生成的属性确保此样式仅应用于 server 内部的 dl，它本质上是 css 范围的 polyfill。如果您所有的目标浏览器本身都支持 css 范围，您甚至可以设置 ViewEnacpsulation.Native

在某些情况下，如果您决定设置根元素的样式，则必须使用特殊选择器 :host

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

所以不要写 server {background: red} 你应该写 :host {background: red}

这也符合 css 范围规范。

阅读有关 CSS 应对和基于组件的更多信息 CSS 以了解有关此策略的更多信息。

作为入门阅读 base documentation in Angular

此外，请注意，您可以将 css 添加到任何全局样式表，就像您所做的那样：

server dl {
    display: flex
}

走哪条路很大程度上取决于您计划如何管理和扩展 css。

在 Less 样式表中使用 Angular 组件名称与生成的 DOM 不匹配

Using Angular component name in Less stylesheet don't match generated DOM

css

less

angular