我有一个组件,它显示一个“项目”列表,这些“项目”是使用选择器创建的组件。我有一个我想要的复选框,当单击以更新所有子组件的“状态”时。
我真的很难找到这样做的正确解决方案。
请参阅 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.htmlexport 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/