angular - 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 属性都已正确设置

这是一个显示问题的 plunker：https ://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

Answer 1

好吧，我现在找到了一个 hack，如果我使用 id 以外的名称发送它，它就可以工作。IE：

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