实现模态框功能_模态框代码

最初用一个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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

这里有两个schema的表结构,赋值给表单sf

但是我复制模态框使用的时候,发现情况有点不一样

<nz-modal
  #modalq
  [nzStyle]="{ top: '45px' }"
  [nzVisible]="false"
  nzWidth="800px"
  (nzOnCancel)="close()"
  [nzTitle]="editTitle"
  [nzFooter]="null"
>
1
2
3
4
5
6
7
8
9

会有打不开表单的情况发生,后来发现同一个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' }"
1
2

这样就能设置宽高了

模态框代码:(高)

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---

ts代码:(旧)

import { NzModalComponent } from 'ng-zorro-antd/modal';
  @ViewChild('modal') modal!: NzModalComponent;
  openModal(): void {
    this.modal.nzVisible = true;
  }
1
2
3
4
5

这样写一个按钮点击openModal()就能实现打开模态框了

ts代码(新)
  close() {
    if (!this.editmodalq) {
      return;
    }
    this.editmodalq.close();
    this.editmodalq.destroy();
  }
1
2
3
4
5
6
7
8

  @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;
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12

**this.editmodalq.open();**主要是这句