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>

问题

当我在组件上设置 "id" 属性时（例如 <my-checkbox id="hello">Check me</my-checkbox>），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。

Answer 1

这更像是一种 hack，在您的组件上您可以这样做：

constructor(elementRef: ElementRef) {
    elementRef.nativeElement.removeAttribute("id");
}

这应该会删除您在 <my-checkbox></my-checkbox>

上的 ID

Answer 2

我会简单地重命名复选框的 ID（以及标签的 for 属性），这样它就不会与组件的 ID 冲突，如下所示：

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

Answer 3

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

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

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

Answer 4

我遇到了类似的问题。我在 ID 前添加了 # 符号并使用 ngModel 绑定属性

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

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

Duplicate "id" attribute in Angular 2 component

angular-components

angular