Angular升级至v16与Ant Design报错：'nzComponentParams'不存在于ModalOptions类型中

问题原因 #

NG-ZORRO从v12升级到v16时，Modal组件的参数传递API发生了变更：原有的nzComponentParams属性被移除，替换为nzData属性用于向内容组件传递参数，这是导致TypeScript类型校验报错的核心原因。

解决方案 #

1. 修改Modal创建代码 #

将配置中的nzComponentParams直接替换为nzData：

// 旧代码
this.modalService.create({
  nzTitle: '确认添加RFID',
  nzContent: ConfirmAddRfidsComponent,
  nzComponentParams: {
    prevProps: someProps,
    tableRef: tableRef
  }
});

// 新代码
this.modalService.create({
  nzTitle: '确认添加RFID',
  nzContent: ConfirmAddRfidsComponent,
  nzData: {
    prevProps: someProps,
    tableRef: tableRef
  }
});

2. 在内容组件中接收参数 #

有两种常用方式获取nzData中的参数：

方式一：通过@Input()绑定

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-confirm-add-rfids',
  templateUrl: './confirm-add-rfids.component.html'
})
export class ConfirmAddRfidsComponent {
  // 直接绑定完整的nzData对象
  @Input() nzData!: { prevProps: any; tableRef: any };

  // 或解构为单独属性使用
  @Input() set nzData(data: { prevProps: any; tableRef: any }) {
    this.prevProps = data.prevProps;
    this.tableRef = data.tableRef;
  }

  private prevProps: any;
  private tableRef: any;
}

方式二：通过NzModalRef访问

如果组件中注入了NzModalRef，可直接通过其nzData属性读取参数：

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

@Component({
  selector: 'app-confirm-add-rfids',
  templateUrl: './confirm-add-rfids.component.html'
})
export class ConfirmAddRfidsComponent {
  constructor(private modalRef: NzModalRef) {
    const { prevProps, tableRef } = this.modalRef.nzData;
    // 后续业务逻辑处理
  }
}

内容的提问来源于stack exchange，提问作者Tony Brasunas