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

你在那里看到的:

_ngcontent-c0 是 Angulars 创建作用域 DOM 的方法。他们出于不同的原因注入(inject)这些属性，其中之一例如用于组件范围的样式。

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

关于此的人类可读文档很少，这是我能找到的最好的文档:

https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b

你不应该对这些有任何影响，但 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 和进行行为更改:

https://angular.io/guide/attribute-directives