javascript - 当 id 和 for 属性绑定(bind)时，标签上的属性不与点击时的关联输入交互

Question

我有一个相当简单的组件，它应该输出一个复选框和标签。组件上有四个输入: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>

当input上的id属性和label上的for属性通过[]绑定(bind)数据时，点击label什么都不做。

如果我对 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>

Answer 1

原来这个错误是因为自定义元素上的 id 属性优先于实际复选框或单选按钮上的结果 id 属性。将 id 输入更改为 idStr 让一切都按预期工作。

例子:

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