重複「身份證」在角2分量

我正在寫一個複選框的自定義角組件屬性。該組件呈現一個複選框標籤和一個標籤標籤。複選框的「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>

是否有到任何一個）擺脫垃圾容器標籤的方式或b）停止「ID」的自動反射支撐在容器上作爲一個屬性？

注意：使用應用於div之類的屬性選擇器沒有幫助，它只是將額外的「id」從<my-checkbox />移動到div。

謝謝！

來源

2017-01-05 Elliot

你爲什麼不稍微改變複選框的'id'， '「和」「？ – balu

這是迄今爲止我見過的最乾淨的解決方案，謝謝。發佈它作爲答案，我會接受。 – Elliot

按照艾略特的要求，我張貼擺脫你的id作爲一個答案我的評論：

我會簡單地重命名的複選框的ID（因此標籤的for屬性），因此它不與組件的id衝突，就像這樣：

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

來源

2017-09-21 09:06:14 balu

這更是一個黑客，你的組件，你可以這樣做：

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

而且應該得到你的<my-checkbox></my-checkbox>

來源

2017-01-06 00:57:05 12seconds

我不知道ElementRef，感謝回覆！我確實想避免直接對戰DOM的控制權，儘管：P – Elliot

您可以通過id作爲一種表達：

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

在這種情況下，組件標籤不包含id屬性在DOM，它僅包含屬性ng-reflect-id，這不會影響標籤的默認行爲。

來源

2018-01-24 13:51:30

重複「身份證」在角2分量

回答

相關問題