如何将 Angular @Input 值分配给另一个变量并填充到子变量中？

Question

我有以下父级 html

<p>Parent</p>
<app-child [mainData]="mainData"></app-child>

父.ts

mainData = [];
ngOnInit() { 
 this.myService((res)=>{
 this.mainData = res;
})
}

子 HTML

<p>My JSON {{mainData | json}}</p> //Here getting result from parent

孩子.ts

@Input() mainData = [];
myDataCopy = [];
ngOnInit() { 
   this.myDataCopy = this.mainData; 
   console.log('My copy Data', this.myDataCopy); // Doesn't get result on here 
}

如果我需要处理@Input数据怎么可能？

Answer 1

在ngOnChanges生命周期钩子中尝试一下

孩子.ts

ngOnChanges(changes: SimpleChanges) {
  const mainDataChange = changes.mainData ;

  if (mainDataChange) {
    this.myDataCopy = this.mainData; 
    // or, this.myDataCopy = mainDataChange.currentValue;
    console.log('My copy Data', this.myDataCopy);
  }
}