1

私は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

4

1 に答える 1

1

今のところハックを見つけました。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 を持つ複数の要素 (Angular コンポーネントと入力) があることでした。

于 2016-08-26T10:01:28.310 に答える