Angular 呈现 DOM html 自定义属性

Question

我是前端新手，我开始使用 Angular。

当我看到最后的 DOM 我看到这样的代码

<style>
.pane[_ngcontent-c0]~
....
}
</style>

<div _ngcontent-c0 class="pane" ...

这是使用 CSS 属性选择器，但我的问题与自定义属性“_ngcontent-c0”有关，在 html5 中有一个名为“数据自定义属性”的新功能以 (data-*) 名称为前缀。在这种情况下，自定义属性未使用 data- 语法，这不会使文档无效？是否可以定义不带 data- 前缀的自定义属性？

提前致谢最好的问候

Answer 1

你是对的，这不再有效 HTML 因为 _ngcontent-c0 没有在 HTML 规范中指定。但这仅仅意味着该属性未定义。

您始终可以添加自定义属性，但这些属性很可能不会产生效果，因为浏览器会忽略它们。请注意，这可能会在未来发生变化。

这些自定义属性是用来封装CSS样式的。在 CSS 中，您仍然可以将这些自定义属性用于样式定义，并且一个组件的样式不会渗入另一个组件的样式。这基本上是 Shadow DOM 的解决方法。 Angular自动将这些自定义属性添加到组件的所有样式中以封装其样式。

Answer 2

你在那里看到的：

_ngcontent-c0 是 Angular 创建作用域 DOM 的方法。他们出于不同的原因注入这些属性，其中之一例如component-scoped 样式。

.pane[_ngcontent-c0] <-- 这是一个 CSS 选择器。组件样式 sheet 中的每个 CSS 规则都适用于它。它发生在预处理中。

这方面的文档很少human-readable，这是我能找到的最好的：

你应该对这些没有影响，但 CLI 也不应该悄悄地削减任何东西。

CLI 可能会由于模板语法错误而停止编译。

通过创建组件，您可以创建自定义 HTML 标签（有点）。我的意思是 <app-component> 等等。它们是 DOM 元素的组件范围的根（再一次，不是 100% 准确，这更多是为了形象化）。

如果您想创建自定义属性，有以下几种方法：

这是您在 Angular 中操作 HTML 属性的方式（不仅适用于自定义属性）

这会在元素中添加或删除属性

<input [attr.disabled]="!value ? null : '' "

将导致 <input disabled=''> 与 <input disabled> 相同。如果我们有一个值，它只是 <input>.

并且在使用 [attr. 语法时，我认为您可以使用的名称没有限制，超出 Angular.

允许的名称

使data-attributes:

<div [attr.data-attr-test]=" 'Foo' ">

并简单地使用组件中的值：

<img [src]="value">

还有像属性一样放置但用于操纵 DOM 和进行行为更改的指令：

Angular rendered DOM html custom attributes