Angular組件間的數據傳輸

解法一

歸納和流程

定義了兩個組件，data-transfer-two和data-transfer-two-child，由data-transfer-two引用data-transfer-two-child，實現兩者之間的數據傳輸

data-transfer-two經過input將數據傳入data-transfer-two-child
->data-transfer-two-child將數據存入form表單
->data-transfer-two定義data-transfer-two-child組件對象
->data-transfer-two經過組件對象獲取data-transfer-two-child內部的相關數據

關鍵代碼

data-transfer-two

<!--data是自定義的輸入輸出，輸入的是數據，同時給組件取名爲dataTransferTwoChild-->
<app-data-transfer-two-child #dataTransferTwoChild [data]='data'></app-data-transfer-two-child>

// 根據前端的命名得到組件
@ViewChild('dataTransferTwoChild') compDataTransferTwoChild: DataTransferTwoChildComponent; // 子組件

// 驗證子組件表單
for (const i in this.compDataTransferTwoChild.childValidateForm.controls){
    if (this.compDataTransferTwoChild.childValidateForm.controls[i].errors != null) {
        this.msg.error('請確認表單輸入');
        return;
    }
}
// 得到子組件數據
let childData=Object.assign(this.data, this.compDataTransferTwoChild.childValidateForm.value);

示例代碼

https://github.com/zLulus/NotePractice/tree/dev3/Website/DotNetCore/CoreNgAlain/src/app/routes/data-transfer-two

解法二

歸納和流程

定義了兩個組件，data-transfer和data-transfer-child，由data-transfer引用data-transfer-child，實現兩者之間的數據傳輸

data-transfer經過input將數據傳入data-transfer-child
->data-transfer-child將數據存入form表單
->監控form表單數據變化，經過output調用方法通知data-transfer
->data-transfer拼湊兩個組件的數據，獲得結果

關鍵代碼

data-transfer

<nz-tabset [(nzSelectedIndex)]="tabIndex">
  <nz-tab nzTitle="Tab2">
    <!--[]表明輸入，()表明輸出-->
    <!--data和dataChange是自定義的輸入輸出，輸入的是數據，輸出的是方法-->
    <app-data-transfer-child [data]='data' (dataChange)='getTime($event)'></app-data-transfer-child>
  </nz-tab>
</nz-tabset>

/**
 * @description  得到輸出
 */
getTime=function(e){
    // 返回表單和數據
    // 這裏的數據是在子組件裏面emit的數據
    this.data.time=e.data.time;
    this.childValidateForm=e.childValidateForm;
}

data-transfer-child

<form nz-form [formGroup]="childValidateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="3" nzRequired>登記時間</nz-form-label>
    <nz-form-control [nzSpan]="8" nzHasFeedback>
      <!--使用ngModelChange隨時監聽數據變化-->
      <nz-date-picker [nzFormat]="yyyy/MM/dd" id="_time" formControlName="time" (ngModelChange)="changeData()"></nz-date-picker>
    </nz-form-control>
  </nz-form-item>
</form>

// 輸入
@Input() data;
// 輸出
@Output() dataChange: EventEmitter<any> = new EventEmitter();
childValidateForm: FormGroup;

/**
 * @description  監聽數據變化並返回給父組件
 */
changeData=function(){
    // 由於子組件沒有相似於提交的按鈕，不然emit能夠在點擊按鈕的時候調用，表單驗證也能夠放在子組件內
    this.data=Object.assign(this.data, this.childValidateForm.value);
    this.dataChange.emit({data:this.data,form:this.childValidateForm});
}

示例代碼

示例代碼

參考資料

Sharing Data Between Angular Components - Four Methods