Angular 2组件中的重复“id”属性答案

【问题标题】：Duplicate "id" attribute in Angular 2 componentAngular 2组件中的重复“id”属性
【发布时间】：2017-05-20 15:26:22
【问题描述】：

上下文

我正在为一个复选框编写一个自定义 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”属性时，会自动在 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。

【问题讨论】：

你为什么不稍微改变一下复选框的id，例如<input id="{{ id }}-checkbox"> 和 <label for="{{ id }}-checkbox">?
我遇到了这个问题，并通过将 [id] 作为时间戳来解决。但我的问题是，我的表单上有 4 个复选框（我正在复制多次）并且要获得所有 4 个的唯一 ID，我需要在我的 ts 文件中创建 4 个单独的变量，如 uniqueId1、uniqueId2 .... .

标签： angular angular-components

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

此时组件标签在DOM中不包含id属性，它只包含ng-reflect-id属性，不影响标签的默认行为。

【讨论】：

【解决方案4】：

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

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

【讨论】：