角度5 ngOnChanges在子组件中仅触发一次

Question

我有一个包含复杂输入（一些图表数据）的子组件。在获得 API 响应后，我通过 Angular 5 中的 @Input（） 装饰器从父组件发送此图表数据。因此，每次在父组件上更改图表时，我都需要根据API响应同步图表，因此，OnChange生命周期。但不幸的是，我无法让它正常工作。我尝试使用基本数字类型设置虚拟输入字段并递增它，但徒劳无功。这是我的实现：

子图表组件：

js prettyprint-override">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只在组件用未定义的值初始化时触发一次。

Answer 1

您必须使用change eDetectorRef

this.cd.markForCheck();
if (!this.cd['destroyed']) {
    this.cd.detectChanges();
}

Answer 2

多亏了@HoangDucNguyen，以下是工作代码：

this.chartService.getChartData(params).subscribe(res => {
  this.chartData = res;
  this.changeDetectorRef.detectChanges();
});

当然，您需要从@angular/核心导入更改检测器Ref类，并将其注入到构造函数中。

说明：
当变量在角度上下文之外发生变化时（这里是rxJs上下文），Angular无法检测变量的变化。因此，您需要手动触发检测变化角度方法。

官方文件:https://angular.io/api/core/ChangeDetectorRef