nz-modal 使用

使用步骤

前提：使用公司自己开发的平台

存在问题

引入模块后，按antd文档上第一个示例写代码，但是对话框里的文字不显示

解决方式

参考下面第二步

1、引入模块

//引入对话框模块
import { NzModalModule } from 'ng-zorro-antd/modal';
//引入按钮模块
import { NzButtonModule } from 'ng-zorro-antd/button';

//以下是antd的原文
export class NzDemoModalBasicComponent {
  isVisible = false;

  constructor() {}

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    console.log('Button ok clicked!');
    this.isVisible = false;
  }

  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
  }
}

2、html文件

<button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
          <p>我是测试文字1</p>
          <p>我是测试文字2</p>
</nz-modal>

说明：antd文档中第一个对话框里写的<ng-container *nzModalContent>试不出来，就没使用

3、实现效果