有时,在Angular 7中,当使用父组件的属性来初始化子组件的属性时,子组件的ngOnchanges
生命周期钩子可能不会被触发。也就是说,当父组件属性更改时,子组件未能接收到更新。
这个问题可以通过使用set
方法来解决。在子组件中,创建一个set
方法,在该方法内部将输入属性值分配给一个本地变量,然后使用本地变量更新组件。
下面是一个例子:
父组件:
@Component({
selector: 'parent-component',
template: `
`,
})
export class ParentComponent {
data = 'initial data';
ngOnInit() {
setTimeout(() => this.data = 'updated data', 2000);
}
}
子组件:
@Component({
selector: 'child-component',
template: `{{inputData}}`,
})
export class ChildComponent implements OnChanges {
private _inputData: string;
@Input()
set inputData(value: string) {
this._inputData = value;
console.log('inputData updated');
}
ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges');
}
}
在这个例子中,父组件将数据传递给子组件的inputData
属性。但如果子组件中的ngOnchanges
没有被触发,则可以使用set
方法将输入数据分配给一个本地变量,然后使用本地变量更新组件。
使用上面的代码,可以使用控制台输出检查更改是否发生。