NgZorro Modal - 如何在 Angular 16 中传递数据？

Question

我正在使用 Ant Design for Angular 库 ng-zorro-antd。

这在 Angular 12 上有效，但现在升级到 Angular 16 后，我看到了这个错误：

ERROR TypeError: Cannot read properties of undefined (reading 'name')

我创建这样的模式：

 private _createDeleteModal(vehicleGroupDetails: VehicleGroupDetails) {
    this.modalService
      .create({
        nzTitle: 'Delete Vehicle Group',
        nzContent: VehicleGroupDeleteComponent,
        nzComponentParams: { existingVehicleGroup: vehicleGroupDetails },
      })

在模态组件中我会得到这样的参数数据：

export class VehicleGroupDeleteComponent implements OnInit {
  @Input() existingVehicleGroup: VehicleGroupDetails;
  ...
  this.vehicleGroupForm = new FormGroup({
    name: new FormControl(this.existingVehicleGroup?.name ?? '', [
      Validators.required,...

但现在似乎数据根本不存在，我只是看到上述错误一遍又一遍地重复，导致浏览器崩溃。

Answer 1

在 Angular v16 及更高版本中使用

nzData

和

NZ_MODAL_DATA

所以我们需要在升级到 Angular 和 Ng-Zorro v16+ 后进行更改

Ng-Zorro 已弃用

nzComponentParams

，转而支持

nzData

，并改用可注入数据共享模型。因此，如果您在 v16 或更高版本中看到此问题，则需要切换到

nzData

和可注射

NZ_MODAL_DATA

。

这应该对你有用。在创建模式的地方，只需要进行一项更改 - 使用

nzData

而不是

nzComponentParams

：

 private _createDeleteModal(vehicleGroupDetails: VehicleGroupDetails) {
    this.modalService
      .create({
        nzTitle: 'Delete Vehicle Group',
        nzContent: VehicleGroupDeleteComponent,
        nzData: { existingVehicleGroup: vehicleGroupDetails },
      })

您需要在模态组件中进行一些更改：

import { Component, inject, OnInit } from '@angular/core';
import { NzModalRef, NZ_MODAL_DATA } from 'ng-zorro-antd/modal';
export class VehicleGroupDeleteComponent implements OnInit {
  readonly nzModalData = inject(NZ_MODAL_DATA);
  existingVehicleGroup: VehicleGroupDetails;

  ngOnInit(): void {
    this.existingVehicleGroup = this.nzModalData.existingVehicleGroup;
  }
}

这应该使模态组件中的其余代码能够按原样工作。

更多这里：莫代尔

并在此解释更改：Github