Context
我正在为复选框编写一个自定义 Angular 组件。该组件呈现复选框标记和标签标记。复选框的“id”属性和标签的“for”属性都设置为组件的id
财产(一个@Input
到组件)以确保单击标签将切换复选框。该模板的简化版本如下所示:
<div class="checkbox">
<input type="checkbox" [id]="id" />
<label [for]="id"><ng-content></ng-content></label>
</div>
Problem
当我在组件上设置“id”属性时(例如<my-checkbox id="hello">Check me</my-checkbox>
),“id”属性会自动设置在 DOM 中的组件包装标签上。这会导致 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(因此标签的for
属性),这样它就不会与组件的 id 冲突,如下所示:
<input id="{{ id }}-checkbox" …>
<label for="{{ id }}-checkbox">…</label>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)