使用 Angular2 如何根据 parent 的 属性 进行 child 组件更新?
With Angular2 how to I have a child component update based on parent's property?
鉴于组件,类似于下面... parent 的 属性 更新正常,但 child 从未看到更改。我需要做什么才能强制 child 查看更新?
angular2@2.0.0-beta.9
<pre>
//parent
@Component({
...,
// child component in parent template set to pass property
// of [obj] as the component's obj property
template: `
Child doesn't update:
<child [obj]="obj"></child>
Interpreted output doesn't either
{{obj.prop}}
`
})
export class Parent {
...
obj:Object = {original:true};
constructor() {
this._unsub = subscribeToExternalEventFeed(this.updateProp.bind(this));
}
updateProp(newObject) {
console.log('parent change', newObject);
this.obj = newObject;
}
...
}</p>
<p>//child
@Component({
...
})
export class Child {
@Input() obj:Object = {};
ngOnChange() {
console.log('child change');
}
}</pre>
显然,我没有正确加载 globals/polyfills...
之前:损坏
<pre>import 'babel-polyfill';
import 'zone.js/dist/zone';
import 'reflect-metadata';</pre>
之后:工作
<pre>import 'babel-polyfill';
import 'reflect-metadata';
import 'zone.js/dist/zone-microtask';</pre>
鉴于组件,类似于下面... parent 的 属性 更新正常,但 child 从未看到更改。我需要做什么才能强制 child 查看更新?
angular2@2.0.0-beta.9
<pre>
//parent
@Component({
...,
// child component in parent template set to pass property
// of [obj] as the component's obj property
template: `
Child doesn't update:
<child [obj]="obj"></child>
Interpreted output doesn't either
{{obj.prop}}
`
})
export class Parent {
...
obj:Object = {original:true};
constructor() {
this._unsub = subscribeToExternalEventFeed(this.updateProp.bind(this));
}
updateProp(newObject) {
console.log('parent change', newObject);
this.obj = newObject;
}
...
}</p>
<p>//child
@Component({
...
})
export class Child {
@Input() obj:Object = {};
ngOnChange() {
console.log('child change');
}
}</pre>
显然,我没有正确加载 globals/polyfills...
之前:损坏
<pre>import 'babel-polyfill';
import 'zone.js/dist/zone';
import 'reflect-metadata';</pre>
之后:工作
<pre>import 'babel-polyfill';
import 'reflect-metadata';
import 'zone.js/dist/zone-microtask';</pre>