Angular 12+NG ZORRO环境下如何在nz-modal内调用自定义组件？

问题解答 #

1. 路由模块不需要额外引用 #

你现在的使用场景是将自定义组件直接作为 nz-modal 的内嵌内容写在父组件模板中，只有当组件需要作为路由页面通过路径直接访问时，才需要在路由模块中注册，当前场景完全不需要添加路由相关配置。
你只需要保证组件满足以下任意一个条件即可正常使用：

• 如果是NgModule模式：AppLabelRelationCreateComponent 已经在当前使用弹窗的模块的 declarations 数组中声明，或者该组件所在的共享模块已经被当前模块引入
• 如果是Angular 14+的独立组件模式：在使用弹窗的父组件的 @Component() 装饰器的 imports 数组中引入 AppLabelRelationCreateComponent 即可

2. 现有写法优化方案 #

你当前的写法已经足够简便，如果你需要让自定义组件内部的表单和弹窗的确认按钮联动，可以通过模板引用变量获取组件实例，直接调用内部的表单校验、提交方法：

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="Create relation"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk(relationCreateComp)">
  <app-label-relation-create #relationCreateComp></app-label-relation-create>
</nz-modal>

对应的TS逻辑示例：

// 先引入自定义组件类型
import { AppLabelRelationCreateComponent } from './app-label-relation-create.component';

handleOk(comp: AppLabelRelationCreateComponent) {
  // 调用组件内部的表单校验方法，校验不通过则阻止弹窗关闭
  if (!comp.validateForm()) return false;
  // 校验通过后获取表单数据处理业务逻辑
  const formValue = comp.getFormValue();
  // ... 执行提交等操作
  this.isVisible = false;
}

3. 可选的更灵活实现：服务式调用 #

如果该弹窗需要在多个地方复用，不想每次都在父组件模板里写 nz-modal 标签，可以使用 NzModalService 直接通过服务创建弹窗，指定内容为你的自定义组件：

import { NzModalService } from 'ng-zorro-antd/modal';
import { AppLabelRelationCreateComponent } from './app-label-relation-create.component';

constructor(private modalService: NzModalService) {}

openCreateRelationModal() {
  this.modalService.create({
    nzTitle: 'Create relation',
    // 直接指定弹窗内容为自定义组件
    nzContent: AppLabelRelationCreateComponent,
    nzOnOk: (compInstance) => {
      // 同样可以直接获取组件实例调用内部方法
      if (!compInstance.validateForm()) return false;
      // 处理提交逻辑
      return true;
    }
  })
}

Angular 13及以上版本使用该方式不需要额外将组件加入 entryComponents 数组，同样不需要路由配置。

内容的提问来源于stack exchange，提问作者Jose Torró