如何使同一个 Angular 2 组件的多个实例在同一个容器中正常工作

Question

我有类似<editor [id]="id"> 模板的组件

<input id="name" />
<label for="name"></label>

并将其与诸如 MaterializeCSS 之类的 CSS 框架一起使用，该框架使用唯一的 HTML DOM id 属性将标签绑定到输入。

现在，如果我这样做：

<div *ngFor="let someThing of listOfSomeThings">
    <editor [id]="someThing.id"></editor>
</div>

angular会生成很多具有相同id的组件，所以id属性根本没有封装，组件开始相互冲突。

我通过这样做找到了解决方案：

<input [id]="id + 'name'" />
<label [for]="id + 'name'" />

但这看起来很糟糕，并导致代码的可维护性降低。有没有更简洁、更好的方法来编写完全封装的 dom 组件（也许我只需要启用一些内部 Angular 2 功能）？还是我应该以这种方式编写所有组件以确保它在这种情况下永远不会发生冲突？

Answer 1

您可以使用 UUID 生成器生成 id 或只是大随机数。