懒加载组件中NG-ZORRO模态框关闭按钮destroy事件未触发问题

核心问题为懒加载模块下Ng-zorro模态框的依赖配置缺失，按以下步骤修改即可：

• 必须在导入NzModalModule的懒加载模块/共享模块中调用forChild()方法：懒加载模块的注入器是独立的，未调用forChild()会导致模态框服务实例隔离，注入到自定义组件中的NzModalRef不是当前打开弹窗的实例，调用destroy方法自然无效。
• 必须将自定义模态框组件加入对应模块的entryComponents数组：虽然Angular12默认开启Ivy后大部分动态组件无需显式声明，但Ng-zorro动态渲染模态框组件的场景下，懒加载模块仍需显式声明才能正确注入组件实例。

修改后的共享模块配置示例 #

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必须添加forChild()
    NzModalModule.forChild(), 
    NzButtonModule
  ],
  exports: [
    ArtistModalComponent,
    NzCardModule,
    NzGridModule,
    NzModalModule,
    NzButtonModule,
  ],
  declarations: [ArtistModalComponent],
  // 动态渲染的模态框组件必须加入entryComponents
  entryComponents: [ArtistModalComponent]
})
export class SharedModule {
  constructor() {}
}

可选排查项 #

若修改配置后问题仍然存在，可在destroyModal方法中添加打印日志验证点击事件是否触发：

• 若点击后未打印日志，检查是否在当前业务模块正确导入NzButtonModule，以及模板中绑定的方法名是否拼写正确
• 若点击后已打印日志但弹窗未关闭，检查业务懒加载模块是否重复导入了未加forChild()的NzModalModule

内容的提问来源于stack exchange，提问作者Ugo Delafosse