为Angular模板html提供动态ID

Question

我创建了一个html模板，该模板在父组件中重复使用了两次，但是传递了不同的数据。

我有parent.component.html，其中有

    <child-component title="one"></child-component>
    <child-component title="two"></child-component>
    <child-component title="three"></child-component>

哪个工作正常。

问题是，在“子组件”中，我具有复选框及其相应的标签。如您所知，他们需要 for 属性才能知道何时选中了复选框。正如我已经意识到的那样，每次调用Angular都会重新渲染子组件，就像克隆一样，每个子组件的 for 属性都相同，因此复选框不起作用。我希望能够在每次调用子组件时为每个复选框创建动态的 for 和 id 。

我试图尽我所能解释我的问题。这样的解决方案可行吗？

Answer 1

受到@mynameisx评论的启发，解决方案比我想象的要简单。

由于我以不同的值传递了title属性，因此它本身区分了每个子组件。因此，在每个子组件中，我都是为输入的 id 和 for 编写的：

<input type="checkbox" id="{{ title }} + Check">
<label for="{{ title }} + Check"></label>

复选框起作用！