我有一个组件,它显示一个“项目”列表,这些“项目”是使用选择器创建的组件。我有一个我想要的复选框,当单击以更新所有子组件的“状态”时。

我真的很难找到这样做的正确解决方案。
请参阅 Plunkr 了解更多信息。

//our root app component
import {Component, EventEmitter} from 'angular2/core'

class Item {
  name: boolean;

  constructor(name: string) {
    this.name = name;
  }
}

@Component({
  selector: 'my-item',
  template: `
    <div>
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
  `
})
export class MyItemComponent {
  state: boolean = false;
}

@Component({
  selector: 'my-app',
  template: `
    <div style="border: 1px solid red;">
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
    <div *ngFor="#item of items">
      <my-item></my-item>
    </div>
  `,
  directives: [MyItemComponent]
})
export class App {
  state: boolean = true;
  items: Item[] = [];

  constructor() {
    this.items.push(new Item("hello"));
    this.items.push(new Item("test"));
  }
}

最佳答案

更新

@Component({
  selector: 'my-item',
  inputs: ['state']; // added
  template: `
    <div>
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
  `
})
export class MyItemComponent {
  state: boolean = false;
}

然后像这样使用它

<my-item [state]="state"></my-item>

原始

Angular 变化检测不检测数组中的变化。
这应该使它工作:

  constructor() {
    this.items.push(new Item("hello"));
    this.items.push(new Item("test"));
    this.items = this.items.slice();
  }

通过这种方式,一个新数组(一个副本)被分配给 this.items,因此 Angular 会将其识别为更改。

MyItem 你需要一个 input
@Component({
  selector: 'my-item',
  inputs: ['items']; // added
  template: `
    <div>
      <label><input type="checkbox" [(ngModel)]="state"/> {{state}}</label>
    </div>
  `
})
export class MyItemComponent {
  state: boolean = false;
  items: Item[]; // added
}

然后你建立与

<my-item [items]="items"></my-item>

要在 MyItemComponent 更改时获取 items 中调用的代码,请执行 ngOnChanges() 另请参阅 https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html

export class MyItemComponent {
  state: boolean = false;
  items: Item[]; // added
  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    console.log('ngOnChanges - myProp = ' + changes['items'].currentValue);
  }
}

关于typescript - Angular 2 子组件检测父组件的变化,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35273724/

10-16 19:35
查看更多