javascript - 当 id 和 for 属性绑定时，label 上的 for 属性在点击时无法与关联的输入框交互

我有一个相当简单的组件，它应该输出一个复选框和标签。组件上有四个输入：id、name、label 和 value。

这是标记：

<div class="checkbox col-xs-12" *ngIf="id && name && label && value">
    <input type="checkbox" [id]="id" [name]="name" [value]="value">
    <label [for]="id" id="{{id}}-label" aria-label="not here">{{label}}</label>
</div>

当输入框的 id 属性和标签的 for 属性通过 [] 绑定到数据时，点击标签不会有任何反应。

如果我硬编码 id 和 for 属性，它们工作得很好。

使用 [attr.id] 和 [attr.for] 得到的都是相同的无效结果。

这里发生了什么？

生成的 HTML 正是你所期望的：

<div _ngcontent-wam-3="" class="checkbox col-xs-12">
    <input _ngcontent-wam-3="" type="checkbox" ng-reflect-id="bob" id="bob" ng-reflect-name="bobby" name="bobby" ng-reflect-value="true" value="true">
    <label _ngcontent-wam-3="" aria-label="not here" ng-reflect-html-for="bob" for="bob" ng-reflect-id="bob-label" id="bob-label">Checkbox 1</label>
</div>

答案＃1

事实证明，这个错误是因为自定义元素上的 id 属性优先于实际复选框或单选按钮上生成的 id 属性。将 id 输入更改为 idStr 后，一切就按预期工作了。

示例：

<my-checkbox name="bob" value="true" idStr="bob1" label="For Bob"></my-checkbox>