我有一个包含复杂输入(一些图表数据)的子组件.在获得API响应后,我通过Angular 5中的@Input()装饰器从父组件发送此图表数据.因此,每次在父组件上更改时,我都需要根据API响应同步图表,因此,OnChange Lifecyle.但不幸的是,我无法使其正常工作.我尝试设置一个具有基本数字类型的虚拟输入字段并增加它但是徒劳无功.这是我的实现:
儿童图表组件:
export class ChartComponent implements OnInit, OnChanges {
@Input() chartData;
@Input() triggerChart;
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
Run Code Online (Sandbox Code Playgroud)
父组件html:
<app-chart [chartData]="chartData" [triggerChart]="triggerChartData"></app-chart>
<input [(ngModel)]="triggerChartData" type="hidden">
Run Code Online (Sandbox Code Playgroud)
父组件:
this.chartService.getChartData(params).subscribe(res => {
this.chartData = res;
this.triggerChartData++;
});
Run Code Online (Sandbox Code Playgroud)
PS:作为标题的ngOnChanges仅指示在组件使用未定义值初始化时触发一次.