如何使同一个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或只是大随机数。