[英]Angular 5 ngOnChanges fires only once in child component
我有一个包含复杂输入(某些图表数据)的子组件。 我收到API响应后,通过Angular 5中的@Input()装饰器从父组件发送此图表数据。 因此,每次在父组件(即OnChange Lifecyle)上更改图表时,我都需要根据API响应同步图表。 但不幸的是,我无法使它正常工作。 我尝试用基本数字类型设置一个虚拟输入字段,并将其递增,但徒劳无功。 这是我的实现:
子图表组件:
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类,并将其注入到构造函数中。
说明:
当变量在角度上下文之外(在这里:这是rxJs上下文)更改时,Angular无法检测到变量的更改。 因此,您需要手动触发检测变化角度方法。
您必须使用changeDetectorRef
this.cd.markForCheck();
if (!this.cd['destroyed']) {
this.cd.detectChanges();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.