我们如何将输入模型类中的每个更改从 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);
      }
   }
}