Angular2ラベルのfor属性が入力にリンクしていません

Question

私はAngular2 RC5を使用しています。 私は<my-input id="inputcontrol">input</my-input> 問題は、私はラベルをクリックしたときに私がチェックしたときに入力ものの、集中されないということですが、次のようにこれは、任意のテンプレートから呼び出されたラベルをカプセル化するコンポーネントと入力

import { Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'my-input', 
    template: ` 
    <div class="mx-field" > 
     <label [attr.for]="id"><ng-content></ng-content></label> 
     <input 
     type='text' 
     id = "{{id}}" 
     /> 
    </div> 
    ` 
}) 

export class InputComponent { 
    @Input() id: string; 
} 

を持っています開発ツールは、ブラウザでのためにとid属性の両方が正しくここ

に設定されている問題を示すplunkerです：私はID以外の名前にそれを使用して、それを送信する場合https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

Answer 1

さて私は、今のハックを見つけました働くすなわち：テンプレートから、その後

import { Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'my-input', 
    template: ` 
    <div class="mx-field" > 
     <label [attr.for]="ident"><ng-content></ng-content></label> 
     <input 
     type='text' 
     id = "{{ident}}" 
     /> 
    </div> 
    ` 
}) 

export class InputComponent { 
    @Input() ident: string; 
} 

とはこの作品<my-input id="inputcontrol">input</my-input>それを呼び出します。

問題はDOMに同じIDを持つ複数の要素（角度成分と入力）があることでした