上下文
我正在为复选框编写自定义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>)时,会在组件包装器标签上自动设置“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之类的属性选择器没有帮助,它只是从< my-checkbox />移动额外的“id”.到了div.
谢谢!
我只是简单地重命名复选框的id(以及属性的标签),以便它不会与组件的id冲突,如下所示:
<input id="{{ id }}-checkbox" …> <label for="{{ id }}-checkbox">…</label>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。