时间戳

首页 > 解决方案 > 在 Less 样式表中使用 Angular 组件名称与生成的 DOM 不匹配

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

问题描述

我通过 Udemy 课程来学习 Angular，我有这种风格：

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 生成的带有 Less 的 Angular 应用程序（但我已经使用server作为选择器手动创建了组件，如果 name 是 也会发生同样的情况app-server）。

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

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

标签： cssangularless

解决方案

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

dl {
    display: flex
}

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

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

:host 选择器是定位宿主元素的唯一方法。您无法使用其他选择器从组件内部访问宿主元素，因为它不是组件自己模板的一部分。宿主元素位于父组件的模板中。

所以server {background: red}你会写而不是写:host {background: red}

这也与用于范围界定的 css 规范内联。

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

作为入门阅读Angular 中的基本文档

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

server dl {
    display: flex
}

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

推荐阅读