Angular2 标签上的 for 属性未将其链接到输入 [英] Angular2 the for attribute on a label does not link it to the input

问题描述

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

import { Component, Input} from '@angular/core';@成分({选择器:'我的输入'，模板:`<div class="mx-field" ><label [attr.for]="id"><ng-content></ng-content></label><输入类型='文本'id = "{{id}}"/>

`})导出类 InputComponent {@Input() id: 字符串；}

从任何模板调用它，如下input问题是当我点击标签时，输入没有得到焦点，尽管当我在浏览器中检查开发工具时，for 和 id 属性都正确设置

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

解决方案

好吧，我现在找到了一个 hack，如果我使用 id 以外的名称发送它，它会起作用.即:

import { Component, Input} from '@angular/core';@成分({选择器:'我的输入'，模板:`<div class="mx-field" ><label [attr.for]="ident"><ng-content></ng-content></label><输入类型='文本'id = "{{ident}}"/>

`})导出类 InputComponent {@Input() 标识:字符串；}

然后从模板中调用它 input 这有效.

问题是 DOM 有多个具有相同 id 的元素(角度组件和输入)

I am working with Angular2 RC5. I have a component encapsulating a label and an 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;
}

It is called from any template as follows <my-input id="inputcontrol">input</my-input> The problem is that when I click on the label the input does not get focused, although when I check the dev tools in the browser both the for and id attributes are correctly set

here is a plunker showing the issue: https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

解决方案

Well I found a hack for now, If I send it using a name other than id it works. 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;
}

and then from the templates call it <my-input id="inputcontrol">input</my-input> this works.

The problem was that the DOM had multiple elements (angular component and the input) with the same id

这篇关于Angular2 标签上的 for 属性未将其链接到输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！