Angular2中标签上的for属性不会把它链接到输入

Question

我正在使用Angular2 RC5。我有一个组件封装一个标签和一个输入

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;
}

可以从任何模板调用，如下所示<my-input id="inputcontrol">input</my-input>问题是，当我单击标签时，输入没有得到聚焦，尽管当我检查浏览器中的开发工具时，for和id属性都正确设置

这里是一个柱塞显示问题:https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

Answer 1

现在我发现了一个hack，如果我发送它使用一个名字而不是id它工作。即:

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