代码之家  ›  专栏  ›  技术社区  ›  Mehdi Benmoha

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

  •  7
  • Mehdi Benmoha  · 技术社区  · 7 年前

    我有一个子组件,它包含复杂的输入(一些图表数据)。 在得到API响应后,我通过Angular 5中的@Input()修饰符从父组件发送此图表数据。因此,每次在父组件上更改图表时,我都需要根据API响应同步图表,因此,OnChange生命周期就是这样。但不幸的是,我无法让它正常工作。我尝试用基本数字类型设置一个虚拟输入字段,并将其递增,但没有成功。以下是我的实现:

    子图表组件:

    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(标题指示)仅触发一次。

    2 回复  |  直到 7 年前
        1
  •  11
  •   Mehdi Benmoha    7 年前

    感谢@HoangDucNguyen,以下是工作代码:

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

    当然,您需要从@angular/core导入ChangeDetectorRef类,并将其注入构造函数中。

    说明:
    当变量在angular上下文之外更改时(在这里:这是rxJs上下文),angular无法检测变量的更改。因此,需要手动启动“检测角度变化”方法。

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

        2
  •  0
  •   Suraj Rao Raas Masood    6 年前

    您必须使用 changeDetectorRef

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