一:所有彈窗盡量以組件的形式編寫
二:彈窗全部使用封裝的 `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>
```