javascript - 属性 Angular 2 的绑定(bind)不会更新具有绑定(bind) ID 的关联输入

Question

我的组件中有一个复选框，绑定(bind)如下:

<input type="checkbox" [name]="name" [id]="id" /><label [htmlFor]="id"></label>

加载组件时，我可以检查元素并发现传递给这些输入的值已绑定(bind)，但是当我单击标签时，复选框未被选中。

我也试过这样:

<input type="checkbox" [attr.name]="name" [attr.id]="id" /><label [attr.for]="id"></label>
<input type="checkbox" name="{{name}}" id="{{id}} /><label [attr.for]="id"></label>

及其组合。它们都产生相同的效果，数据已绑定(bind)，复选框未选中。

这是我的组件:

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

@Component({
  inputs: ['name', 'id'],
  selector: 'my-checkbox',
  templateUrl: 'app/form/input/checkbox.component.html'
})

export class CheckboxComponent {}

以及使用它的 html:

<my-checkbox name="test-name" id="test-id"></my-checkbox>

Answer 1

当您使用 id 作为输入名称时，您的组件将作为带有此 id 的 dom 元素。它将相同的 id 添加到复选框和标签的 for。但是当你有多个具有相同 id 的元素时，label 指的是其中的第一个。在你的情况下，它指的是你的组件而不是 input。

只需重命名输入参数。

顺便说一句，在ts类中声明相应的字段是正确的。

http://plnkr.co/edit/JazXV3Oi91hSBTdVlBHh?p=preview

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

@Component({
  selector: 'my-app',
  template: `
      <my-checkbox-broken id="test-id-1"></my-checkbox-broken><br>
      <my-checkbox-broken [id]="'test-id-2'"></my-checkbox-broken> can work too<br>
      <my-checkbox-working chkId="test-id-3"></my-checkbox-working><br>
      <output></output>
  `
})
export class AppComponent {
}

@Component({
  inputs: ['id'],
  selector: 'my-checkbox-broken',
  template: '<input type="checkbox" [id]="id" /><label [htmlFor]="id">Broken :(</label>'
})
export class CheckboxComponent_Broken {
  id: string;
}

@Component({
  inputs: ['chkId'],
  selector: 'my-checkbox-working',
  template: '<input type="checkbox" [id]="chkId" /><label [htmlFor]="chkId">Working!</label>'
})
export class CheckboxComponent_Working {
  chkId: string;
}

document.addEventListener('click', ({ target: { htmlFor: id } }) => {
  if (id) {
    document.querySelector('output').textContent = id + " is " + document.getElementById(id).tagName;
  }
})