重复的“id"Angular 2 组件中的属性 [英] Duplicate "id" attribute in Angular 2 component

问题描述

背景

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

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

问题

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

<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">发射导弹?

</my-checkbox>

有没有办法 a) 去掉垃圾容器标签或 b) 停止将id"道具作为属性自动反射到容器上?

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

解决方案

我会简单地重命名复选框的 id(以及标签的 for 属性)，这样它就不会与组件的 id 冲突，像这样:

Context

I'm writing a custom Angular component for a checkbox. The component renders a checkbox tag along with a label tag. The "id" attribute of the checkbox and the "for" attribute of the label are both set to the component's id property (an @Input to the component) to ensure that clicking the label will toggle the checkbox. A simplified version of the template looks like:

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

Problem

When I set an "id" prop on my component (e.g. <my-checkbox id="hello">Check me</my-checkbox>), an "id" attribute is automatically set on the component wrapper tag in the DOM. This results in duplicate ids in the DOM because I'm already setting an "id" attribute on the checkbox inside the component. This is invalid and breaks the browser's default toggle-by-clicking-the-label behavior. The DOM output is:

<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>

Is there a way to either a) get rid of the garbage container tag or b) stop the automatic reflection of the "id" prop onto the container as an attribute?

NOTE: Using an attribute selector applied to something like a div doesn't help, it just moves the extra "id" from <my-checkbox /> to the div.

解决方案

I would simply rename the checkbox's id (and hence the label's for attribute) so that it doesn't clash with the component's id, like so:

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

这篇关于重复的“id"Angular 2 组件中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！