Дубликат «идентификатор» атрибут в угловом 2 компоненте

Question

Контекста

Я пишу пользовательский Угловой компонент для флажка. Компонент отображает тег флажка вместе с тегом метки. Атрибут «id» флажка и атрибут «для» метки устанавливаются как свойство 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>), «идентификатор» атрибут автоматически устанавливается на компоненте тег обертки в DOM. Это приводит к дублированию идентификаторов в DOM, поскольку я уже устанавливаю атрибут «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> 

Есть ли способ, чтобы либо а) избавиться от мусора тега контейнера или б) остановить автоматическое отражение «ид» проп на контейнер в качестве атрибута?

ПРИМЕЧАНИЕ. Использование селектора атрибутов, применяемого к чему-то вроде div, не помогает, оно просто перемещает дополнительный «id» из <my-checkbox /> в div.

Спасибо!

Answer 1

По просьбе Элиота, я отправляю мой комментарий в ответ:

Я бы просто переименовать идентификатор CheckBox (и, следовательно, атрибут лейбла for), чтобы он не конфликтует с идентификатором компонента, например, так:

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

Answer 2

Это больше хака, на компоненте вы можете сделать это:

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

И это должно избавиться от ид на вашем <my-checkbox></my-checkbox>

Answer 3

Вы можете передать id как выражение:

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

В этом случае тег компонента не содержит id атрибут в DOM, он содержит только атрибут ng-reflect-id, который не влияет на поведение по умолчанию для этикетки.