我有一个包含复杂输入(一些图表数据)的子组件。 在获得 API 响应后,我通过 Angular 5 中的 @Input() 装饰器从父组件发送此图表数据。因此,每次在父组件上发生更改时,我都需要根据 API 响应同步图表,因此,OnChange Lifecyle。但不幸的是,我无法让它正常工作。我尝试使用基本数字类型设置一个虚拟输入字段并递增它,但没有成功。这是我的实现:
子图表组件:
export class ChartComponent implements OnInit, OnChanges {
@Input() chartData;
@Input() triggerChart;
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
父组件html:
<app-chart [chartData]="chartData" [triggerChart]="triggerChartData"></app-chart>
<input [(ngModel)]="triggerChartData" type="hidden">
父组件:
this.chartService.getChartData(params).subscribe(res => {
this.chartData = res;
this.triggerChartData++;
});
PS:如标题所示的 ngOnChanges 仅在组件使用未定义值初始化时触发一次。
最佳答案
感谢@HoangDucNguyen,这是工作代码:
this.chartService.getChartData(params).subscribe(res => {
this.chartData = res;
this.changeDetectorRef.detectChanges();
});
当然,您需要从@angular/core 导入 ChangeDetectorRef 类并将其注入(inject)到您的构造函数中。
解释:
当变量在 Angular 上下文之外更改时(在这里:它是 rxJs 上下文),Angular 无法检测到变量的更改。因此,您需要手动触发检测更改 Angular 方法。
关于Angular 5 ngOnChanges 在子组件中只触发一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48264304/