在组件的 html 中使用 id 属性可以吗？答案

【问题标题】：Is it OK to use id attribute in component's html?在组件的 html 中使用 id 属性可以吗？
【发布时间】：2020-05-04 06:37:29
【问题描述】：

考虑一个组件c 和html

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

css

#SomeID{
color:grey;
}

如果C 被包含在父组件P 中两次，那么id 不会被重复，这在html 中不应该发生

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

【问题讨论】：

你通过类来写。如果您使用 ID，请向其中添加一些变量。 id="someID_{{index}}"
得到了变量位。 via classes 是什么意思？另外，如果我以编程方式添加 add id，我该如何为它编写 css？是使用 ^ 之类的 css 规则吗？
CSS Class Selectors explained Angular 会将这些范围限定为您的组件。但是如果你在掌握 css 类的概念时遇到问题，你应该在开始使用 Angular 之前先学习这些。（顺便说一句，为什么 Angular 6 而不是版本 9，当前版本？）
谢谢。从事个人项目的业余爱好以及正常工作。暂时不需要搬到 9 点。
很高兴接受您的回答。在css 的班级和angular 班级之间感到困惑

【解决方案1】：

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

Angular 会自动设置样式的范围，因此在一个组件中定义的类不会影响另一个组件中的同名类。

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

.my-form {
  color: green;
}

另外请注意，您应该确保在定义属性后始终有一个空格。在您发布的示例中，someId" 之后没有空格可能在这种情况下无关紧要，但我想最好立即开始寻找这样的小事情。

【讨论】：

【解决方案2】：

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

首先是id 用于单个特定元素，而class 可以针对多个元素，这意味着如果您确定某个元素不会重复，通常会使用id 选择器，例如导航栏。

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

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

【讨论】：

【解决方案3】：

html 上的 Angular 支持 id。但是由于您在“P”组件上多次加载“C”组件，因此 Id 将被复制。所以最好在你的 html 上使用 class 而不是 id ..

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

在您的“C”组件的 css 上，

  .yourClass{
    color:grey;
    }

【讨论】：