我們如何將輸入模型類中的每個更改從 Angular 13 中的子組件推送到父組件

Question

我們如何將輸入模型類中的每個更改從 Angular 13 中的子組件推送到父組件

子組件

export class ChildComponent implements OnInit {
  @Input() mdlInData: any;
  @Output() mdlOutData = new EventEmitter<any>();

  ngOnInit(): void {
    this.mdlInData.subscribe((data) => {
      this.mdlOutData.emit(this.mdlInData);
    });

// This values Changes in HTML also -> TWO-WAY binding 

  this.mdlInData.id = 1;
    this.mdlInData.Name = "Test";
   this.mdlInData.phone = ['7867878', '768689678']; 

 //... More Properties
 }

Answer 1

您需要實現OnChanges生命周期掛鈎：

export class ChildComponent implements OnChanges {
   @Input() input: any;
   @Output() output = new EventEmitter<any>();

   ngOnChanges(changes: SimpleChanges): void {
      // if input property received new value from parent, emit back its value
      if (changes?.input?.currentValue) {
         this.output.emit(changes.input.currentValue);
      }
   }
}