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

Posted 2023-02-23

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

【英文标题】：How to make multiple instances of the same Angular 2 component work properly in the same container

【发布时间】：2017-06-06 10:06:57

【问题描述】：

我有类似<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 功能）？还是我应该以这种方式编写所有组件以确保它在这种情况下永远不会发生冲突？

【问题讨论】：

这个可维护性较差的代码如何？如果您想在页面上多次使用相同的组件，这是获取唯一标识符的好选择。这个：="id + 'name'，真的有用吗？看起来您缺少双引号。

是的，它确实有效。我错过了双引号。它会导致代码更混乱，因此更难维护，因为现在我认为我应该在我创建的每个组件中使用这样的 ID，即使是我不以这种方式使用的那些，因为有人可以以这种方式使用它。此外，如果组件没有唯一标识符，我必须生成它（例如某种 guid），因为有人可以在同一页面上放置多个实例。

除非您的 ListOfSomethings 中有重复的 ID，否则我看不出这是怎么发生的。你能在这个 plunk 中重现你的问题吗：plnkr.co/edit/62WNlCTtK5WIWVswLYyq?p=preview

目前是这样的 plnkr.co/edit/dNIEIWoZu55KyNQfXiLa?p=preview 。现在，如果我使用响应式表单模块并尝试设置 radio 输入类型 - 第二个注释和第三个注释的单选按钮不起作用。

【参考方案1】：

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

【讨论】：

问题是：我应该为我创建的每个组件生成这个UUID吗？我还没有看到任何以这种方式创建的组件，这真的让我很不安，我可以安装任何第三方组件并且不能在同一页面上使用多个实例。

如果 Angular 2 有一些功能可以为每个组件实例启用随机 [id] 前缀生成，那将是完美的。也许我应该把这个写到 github 上的问题上？

如果你使用id属性那么你必须提供唯一值，它与角度无关。