时间戳

首页 > 解决方案 > 在包含自定义组件的 Angular 页面中，我应该如何确保所有 ID 都是唯一的以消除警告？

html - 在包含自定义组件的 Angular 页面中，我应该如何确保所有 ID 都是唯一的以消除警告？

问题描述

我有一个用于文本输入的自定义组件，每个组件都有一个 ID 为data的内部字段。它会导致出现以下警告。

[DOM] 找到 13 个具有非唯一 ID #data 的元素

我很清楚为什么会发生这种情况，并且我知道这是一个警告，而不是实际错误。我也认识到 ID 是唯一的（在其范围内）的适当性。

我不完全确定在我的特定案例中的含义。在我看来，警告是可以容忍的，但不能接受。

是否有消除错误的最佳实践方法？根据 GP 组件的概念，某些部分在每个实例中都是相似的。还是有一个技巧来唯一化ID？或者也许是一个指令或类似的指令让 Angular 知道我们对状态很满意？

该组件使用@ViewChild("data")来引用下面模板中的输入控件。

<div id="outer">
  ...
  <label for="data">{{label}}</label>
  <input #data id="data" ... >
  <div *ngFor="let error of errors" class="row"> ... </div>
</div>

标签： htmlangular

解决方案

据我了解，使用 ids 的目的是在 Angular 内部查询它。您可以使用指令或其他属性进行查询，而不会发出任何警告。您还可以制作一种包装器，将通用 ID 应用于输入及其标签，并仅连接您想要使用的 UUID 和 ID。但如果它只是关于查询，只需选择另一个属性。例如data-id或data-qa任何让您能够查询并且同时没有错误的能力。以防万一@ViewChild("data")，#data而不是id="data"您可以用标签标签包装输入。

推荐阅读