Angular 2组件中的"id"属性重复

Question

上下文

我正在为复选框编写自定义Angular组件.该组件呈现复选框标记以及标签标记.复选框的"id"属性和标签的"for"属性都设置为组件的id属性(组件的属性@Input),以确保单击标签将切换复选框.该模板的简化版本如下所示:

<div class="checkbox">
    <input type="checkbox" [id]="id" />
    <label [for]="id"><ng-content></ng-content></label>
</div>

问题

当我在我的组件(例如<my-checkbox id="hello">Check me</my-checkbox>)上设置"id"prop时,会在DOM中的组件包装器标签上自动设置"id"属性.这导致DOM中出现重复的ID,因为我已经在组件内的复选框上设置了"id"属性.这是无效的,并且会破坏浏览器的默认切换点击标签行为.DOM输出是:

<my-checkbox id=“my-checkbox” ng-reflect-id=“my-checkbox” ng-reflect-checked="true">
    <div ng-reflect-ng-class="[object Object]" class="checkbox">
        <input class="checkbox__element" type="checkbox" name="fire_missiles" ng-reflect-id=“my-checkbox” id=“my-checkbox” value=“fire_missiles” ng-reflect-checked="true">
        <label class="checkbox__label" ng-reflect-html-for=“my-checkbox” for=“my-checkbox”>
            Fire missiles?
        </label>
    </div>
</my-checkbox>

有没有办法要么a)摆脱垃圾容器标签或b)停止自动反映"id"道具作为属性？

注意:使用应用于div之类的属性选择器没有帮助,它只是将额外的"id"从<my-checkbox />div 移动到div.

Answer 1

我只是简单地重命名复选框的id(以及标签的for属性),以便它不会与组件的id冲突,如下所示:

<input id="{{ id }}-checkbox" …>
<label for="{{ id }}-checkbox">…</label>

Answer 2

您可以id作为表达式传递：

<my-checkbox [id]="'hello'">Check me</my-checkbox>

在这种情况下，组件标签id在 DOM中不包含属性，它只包含属性ng-reflect-id，不影响标签的默认行为。