最初用一个template来实现类似模态框的功能
模态框代码:(旧)
<nz-modal
#modal
[nzStyle]="{ top: '45px' }"
[nzVisible]="false"
nzWidth="800px"
(nzOnCancel)="close()"
[nzTitle]="editTitle"
[nzFooter]="null"
>
<sf *nzModalContent #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="editRow" button="none">
<nz-collapse>
<nz-collapse-panel nzHeader="模型属性">
<sf
#detailSF
mode="edit"
[schema]="detailSchema"
[ui]="ui"
cleanValue
[formData]="editRow"
button="none"
[layout]="'vertical'"
></sf>
</nz-collapse-panel>
</nz-collapse>
<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 || !detailSF.valid"
[nzLoading]="http.loading"
>
保存
</button>
</div>
</sf>
</nz-modal>
这里有两个schema的表结构,赋值给表单sf
但是我复制模态框使用的时候,发现情况有点不一样
<nz-modal
#modalq
[nzStyle]="{ top: '45px' }"
[nzVisible]="false"
nzWidth="800px"
(nzOnCancel)="close()"
[nzTitle]="editTitle"
[nzFooter]="null"
>
会有打不开表单的情况发生,后来发现同一个html中有两个 #modal
需要设置这个一个别名,但是设置别名,并且viewchild关联ts文件后,发现打开后跳出的表单不完整,并且关闭功能没法正常使用
这是为什么,因为 (nzOnCancel)=“close()”(点击弹窗右上角叉号可以关闭)的close调用的是viewchild实例化后的modal.destroy,具体内容可以看基类的基类(两次继承的方法),所以这样不太行,需要自己重写close方法,open方法不用(这个基类的基类里也没有变动),然后在close中使用editmodalq(modal实例化后的名字),然后调用this.editmodalq.close(); this.editmodalq.destroy();这样(nzOnCancel)="close()"就有效了
但是 nzWidth="800px"只设置了宽度,并且有点过宽,可以
nzWidth="600px"
[nzBodyStyle]="{ height: '150px' }"
这样就能设置宽高了
模态框代码:(高)
<nz-modal
#modalq
[nzStyle]="{ top: '45px' }"
[nzVisible]="false"
nzWidth="600px"
(nzOnCancel)="close()"
[nzBodyStyle]="{ height: '150px' }"
[nzTitle]="editTitle"
[nzFooter]="null"
>
<sf *nzModalContent [schema]="transRateSchema" mode="edit" button="none" #sfRef>
<div class="modal-footer">
<button nz-button type="button" [nzType]="'primary'" (click)="close()">关闭</button>
<button nz-button type="submit" [nzType]="'primary'" (click)="updateData(sfRef.value)" [nzLoading]="http.loading">保存</button>
</div>
</sf>
</nz-modal>
ts代码:(旧)
import { NzModalComponent } from 'ng-zorro-antd/modal';
@ViewChild('modal') modal!: NzModalComponent;
openModal(): void {
this.modal.nzVisible = true;
}
这样写一个按钮点击openModal()就能实现打开模态框了
ts代码(新)
close() {
if (!this.editmodalq) {
return;
}
this.editmodalq.close();
this.editmodalq.destroy();
}
@ViewChild('modalq') editmodalq!: NzModalComponent;
openModal(item: any): void {
this.editmodalq.open();
this.transRate = item.TRANS_RATE;
const request = new PageRequest();
request.PageCondition.PageSize = 5;
request.FilterGroup.Rules.push(new FilterRule('PUMP_CODE', item.PUMP_CODE, FilterOperate.Equal));
const url = 'api/DWPump/Setting/HT_PUMP_CON/read';
this.http.post(url, request).subscribe(result => {
this.updateItem = result.Rows;
});
}
**this.editmodalq.open();**主要是这句