如何將子組件數據傳遞給父組件

Question

我有 3 個組件，2 個孩子和 1 個父母。 我在父組件中有保存按鈕，為了在父組件中獲取子數據，我試過這個：

<div class="border border-dark p-1 m-1">
  <basic-details
    *ngIf="customerData"
    [formType]="formType"
    [customerDetails]="customerData"
    #customerDetails
  ></basic-details>
</div>
<div class="border border-dark p-1 m-1">
  <verification-details
    *ngIf="customerData"
    [formType]="formType"
    [customerDetailsForKyc]="customerData"
    #customerDetailsForKyc
  ></verification-details>
</div>

<div class="row main justify-content-center">
  <button class="btn btn-primary" (click)="save(customerDetails, customerDetailsForKyc)">Save</button>
  <button class="btn btn-primary ml-2" (click)="cancel()">Cancel</button>
</div>

ts文件

save(basic, kyc) {
    console.log('basic', basic);
    console.log('kyc', kyc);
  }

對於basic-details組件，我在單擊保存按鈕時在父組件中獲取了正確的數據，但是對於verification-details ，我收到以下錯誤：

在兩個子組件中，我都使用 @Input() 獲取數據，如下所示：

對於基本組件：

@Input() customerDetails: ICustomerDetailsData;

用於驗證組件

@Input() customerDetailsForKyc;

我做錯了什么嗎？

Answer 1

我有一個您的代碼的工作示例，兩個孩子和一個父母。 正如您在問題中所描述的，我在代碼中使用了幾乎類似的東西。 您沒有提到[formType]="formType" ，這就是我沒有使用它的原因。 請檢查我的代碼。 它在 StackBlitz 中工作 ==> Angular 父子 co acqylp 之間的雙向數據綁定

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-children [(data)]="message"  
              [customerDetails]="customerData"
              #customerDetails></app-children>
             <br><br>
             <app-children2 [(data)]="message2" 
              
             [customerDetailsForKyc]="customerData"
             #customerDetailsForKyc></app-children2>
            <div>Parent: {{message}}
            <br>
            <button class="btn btn-primary" (click)="save(customerDetails, customerDetailsForKyc)">Save</button>
            </div>`,
})

export class AppComponent {
  public message: string;
  public message2: string;
  customerData:ICustomerDetailsData={color:'TTT',width:15};
  ngOnInit() {
    this.message = 'Original message'
    this.message2 = 'Original message2'
  }
  save(basic, kyc) {
    console.log('basic', basic);
    console.log('kyc', kyc);
  }
}

@Component({
  selector: 'app-children',
  template: `<div>Children: {{data}}</div> 
              <br>
              <input type="text" class="form-control" id="name"
     
              [(ngModel)]="data" >
              <br>
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildComponent {
  @Input() public data: string;
  @Input() customerDetails: ICustomerDetailsData;
  @Output() dataChange= new EventEmitter<string>();
  changeMessage(message: string) {
    this.data = message;
    this.dataChange.emit(this.data);
  }
}

 @Component({
  selector: 'app-children2',
  template: `<div>Children: {{data}}</div> 
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildComponentNew {
    @Input() customerDetailsForKyc;
  @Input() public data: string;
  @Output() dataChange= new EventEmitter<string>();
  changeMessage(message: string) {
    this.data = message;
    this.dataChange.emit(this.data);
  }
}
interface ICustomerDetailsData {
  color?: string;
  width?: number;
}

Answer 2

原文

1. 您的方法： save(customerDetails, customerDetailsForKyc)"用作 arguments 模板變量。這是錯誤的，因為它們有其他目標。"模板變量幫助您在模板的另一部分使用來自模板一部分的數據。 使用模板變量，您可以執行諸如響應用戶輸入或微調應用程序的 forms 等任務。”模板變量 | Angular 。
2. 如果要在父組件中發送數據（將子組件數據傳遞給父組件），那么使用裝飾器 @Output在子和父指令和組件之間共享數據 | Angular

Answer 3

從子組件到父組件的另一種選擇是使用 @ViewChild 裝飾器將子組件注入到父組件。 因此，當單擊保存按鈕時，您應該能夠獲取子組件的數據。 檢查ViewChild | Angular