一：所有彈窗盡量以組件的形式編寫 二：彈窗全部使用封裝的 `modalHelper` ~~~ modalHelper類提供兩個方法創建彈窗： 1.create （點擊遮罩區可以關閉） 2.createStatic （點擊遮罩區不可以關閉） this.modalHelper.create(FormEditComponent, { i },?{?size:?'lg'?}).subscribe(res => this.load()); 參數一：component組件 參數二：傳遞給組件的參數 參數三：擴展參數,擴展參數是一個對象 擴展參數： {size:'lg',modalOptions:{nz-modal對話框原始參數},includeTabs:false(是否包裹標簽頁)} ~~~ 三：交互 1.數據交互 關閉彈窗提供了兩種方法 一：`this.modal.close(res);` 二：`this.modal.destroy(res);` 這兩種方法都提供了一個可當作回調的`Observable` ，當調用關閉方法時可傳遞一個數據,推送到`Observable`對象中，然后就可以在`subscribe`中優雅的處理回調。 ``` this.modalHelper.create(ServiceComponent).subscribe(res => { //處理回調,回調參數即是傳遞的數據 this.service.show = true; this.service.name = res.addr; this.service.id = res.id; this.changeRef.markForCheck(); //觸發變量檢測 }); ``` 2.自定義彈窗頭部 ``` <div class="modal-header"> <div class="modal-title">標題</div> </div> ``` 3.自定義彈窗底部 ``` <div class="modal-footer"> <button nz-button type="button" (click)="close()">關閉</button> <button nz-button type="submit" [nzType]="'primary'" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading" > 保存 </button> </div> ```