上下文
我正在为复选框编写自定义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。
答案 0 :(得分:6)
我只需重命名复选框的ID(以及标签的for
属性),这样它就不会与组件的ID冲突,就像这样:
<input id="{{ id }}-checkbox" …>
<label for="{{ id }}-checkbox">…</label>
答案 1 :(得分:3)
您可以将id
作为表达式传递:
<my-checkbox [id]="'hello'">Check me</my-checkbox>
在这种情况下,组件标记在DOM中不包含id
属性,它只包含属性ng-reflect-id
,这不会影响标签的默认行为。
答案 2 :(得分:0)
这更像是一个黑客,你可以在你的组件上执行此操作:
constructor(elementRef: ElementRef) {
elementRef.nativeElement.removeAttribute("id");
}
这应该会删除您<my-checkbox></my-checkbox>
答案 3 :(得分:0)
我遇到了类似的问题。我在ID之前添加了#号,并使用ngModel绑定了属性
<input id="#{{ id }}-checkbox" …>
<label for="#{{ id }}-checkbox">…</label>