在组件的 html 中使用 id 属性是否可以？

Question

考虑组件 c 和 html

<form id="someID"[formGroup]="codeEditorForm" novalidate>
</form>

和css

#SomeID{
color:grey;
}

如果 C 被包含在父组件 P 中两次，那么 id 也不会被复制，这在 html[= 中不应该发生24=]

问题 1 - 我不应该在 Angular 中使用 id 吗？问题 2 - 我该如何在不使用 id 的情况下编写 css 规则？

Answer 1

您 can 使用 ID，但通常不需要这样做。

Angular 自动限定样式范围，因此在一个组件中定义的 class 不会影响另一个组件中具有相同名称的 class。

<form id="someID" class="my-form" [formGroup]="codeEditorForm" novalidate>
</form>

.my-form {
  color: green;
}

另请注意，您应确保在定义属性后始终存在 space。在您发布的示例中，someId" 之后没有 space 也许在这种情况下并不重要，但我想最好立即开始寻找像这样的小东西。

Answer 2

据我所知，id 和 class 之间有两个区别。

首先是 id 用于单个特定元素，而 class 可以针对多个元素，这意味着您通常会使用 id 选择器，如果您确定元素不会重复，类似navbar.

而第二个是id选择器比class选择器更具体，这意味着如果有任何样式冲突，id选择器中写的规则覆盖规则写在 class 选择器

通常你不会用它来覆盖规则，因为还有其他方法可以做到这一点，所以为了决定使用哪一个，你需要做的就是考虑这个 >> 是你给 id 的元素真的会独一无二吗？

Answer 3

Angular html 支持 id。但是，由于您在 'P' 组件上多次加载 'C' 组件，因此 Id 将被复制。所以最好在 html..

上使用 class 而不是 id

<form class="yourClass"[formGroup]="codeEditorForm" novalidate>
</form>

在您的 'C' 组件的 css、

  .yourClass{
    color:grey;
    }

Is it OK to use id attribute in component's html?