javascript - 惰性加载组件中的NG-ZORRO模态组件，关闭按钮销毁事件未触发

Question

我正在使用 Ng-zorro 在延迟加载的组件中显示自定义模式组件：

用于显示自定义模式的组件：

showArtistModal(artist: any): void {
this.modalService.create({
  nzContent: ArtistModalComponent,
  nzComponentParams: {
    artist,
  },
  nzCentered: true,
  // nzOnOk: () => new Promise((resolve) => setTimeout(resolve, 1000)),
  // nzFooter: [
  //   {
  //     label: 'Close',
  //     shape: 'round',
  //     onClick: () => modal.destroy(),
  //   },
  //   {
  //     label: 'Confirm',
  //     type: 'primary',
  //     onClick: () => modal.destroy(),
  //   },
  // ],
})}

自定义模态组件：

import { Component, Input } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-artist-modal',
  templateUrl: './artist-modal.component.html',
  styleUrls: ['./artist-modal.component.scss'],
})
export class ArtistModalComponent {
  @Input() artist;

  constructor(private modal: NzModalRef) {}

  destroyModal(): void {
    this.modal.destroy();
  }
}

模板：

<div>
  <div *nzModalTitle>
    {{artist.name}}
  </div>
  <div>
    truc
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="primary" (click)="destroyModal()">Close</button>
  </div>
</div>

共享模块：

import { NgModule } from '@angular/core';

// Components
import { ArtistModalComponent } from './artist-modal/artist-modal.component';

// NgZorro Components
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [NzCardModule, NzGridModule, NzModalModule, NzButtonModule],
  exports: [
    ArtistModalComponent,
    NzCardModule,
    NzGridModule,
    NzModalModule,
    NzButtonModule,
  ],
  declarations: [ArtistModalComponent],
})
export class SharedModule {
  constructor() {}
}

但是当它显示时我无法关闭模式，没有触发destroy（）事件并且关闭按钮不起作用。我错过了什么吗？已经尝试移动与用于显示模式的组件相同的模块中的所有内容，但它仍然无法正常工作。我正在使用 Angular 12。

标签： javascriptangularnode-modulesng-zorro-antdangular12