对话框辅助类

基于 NzModalService 封装,它解决一些已知问题:

  • 更友好的处理回调

  • 按钮默认焦点

  • 响应式宽度

用法

this.modalHelper.create(FormEditComponent, { i }).subscribe(res => this.load());

// 成功范例,其中 `nzModalRef` 指目标组件在构造函数 `NzModalRef` 变量名
// 1. 视为成功
this.nzModalRef.close(true);
this.nzModalRef.close({ other: 1 });
// 2. 视为失败
this.nzModalRef.close();

// 关闭:
this.nzModalRef.destroy();

包括两个方法体 create & createStatic 分别打开普通&静态对话框。在 NzModalService 基础上新增若干参数。

自定义组件HTML模板

<div class="modal-header">
  <div class="modal-title">Title</div>
</div>

Your body content

<div class="modal-footer">
  <button nz-button [nzType]="'default'" (click)="cancel()">
    Cancel
  </button>
  <button nz-button [nzType]="'primary'" (click)="ok()">
    OK
  </button>
</div>

API

名称类型默认值描述
size指定对话框大小sm,md,lg,xl,number,stringlg
exact是否精准(默认:true),若返回值非空值(nullundefined)视为成功,否则视为错误booleantrue
includeTabs是否包裹标签页booleanfalse
drag支持拖动boolean, ModalHelperDragOptions-
useNzData是否强制使用 nzData 传递参数,若为 false 表示参数会直接映射到组件实例中,其他值只能通过 NZ_MODAL_DATA 的方式来获取参数booleanfalse
modalOptions对话框 ModalOptions 参数ModalOptions-

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component, inject } from '@angular/core';

import { DemoModalComponent } from '@shared';

import { ModalHelper } from '@yelon/theme';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'theme-modal-simple',
  template: `
    <button nz-button (click)="open()">Open</button>
    <button nz-button (click)="static()">Static</button>
  `,
  standalone: true,
  imports: [NzButtonModule]
})
export class ThemeModalSimpleComponent {
  private modalHelper = inject(ModalHelper);
  private msg = inject(NzMessageService);

  open(): void {
    this.modalHelper.create(DemoModalComponent, { record: { a: 1, b: '2', c: new Date() } }).subscribe(res => {
      this.msg.info(res);
    });
  }

  static(): void {
    this.modalHelper.createStatic(DemoModalComponent, { record: { a: 1, b: '2', c: new Date() } }).subscribe(res => {
      this.msg.info(res);
    });
  }
}
拖动

支持拖动对话框。

expand code expand code
import { Component, inject } from '@angular/core';

import { DemoModalComponent } from '@shared';

import { ModalHelper } from '@yelon/theme';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'theme-modal-drag',
  template: ` <button nz-button (click)="open()">Open</button> `,
  standalone: true,
  imports: [NzButtonModule]
})
export class ThemeModalDragComponent {
  private modalHelper = inject(ModalHelper);
  private msg = inject(NzMessageService);

  open(): void {
    this.modalHelper
      .create(DemoModalComponent, { record: { a: 1, b: '2', c: new Date() } }, { drag: true })
      .subscribe(res => {
        this.msg.info(res);
      });
  }
}
Loading...