zg-zorro-antd 升级后 Modal 对话框传递数据问题
0
悬赏园豆：30
[已解决问题]
解决于 2024-12-19 12:42
园子的博客后台从 angular 15 升级到 angular 19，zg-zorro-antd 从 15.1 升级到 19.0.0-beta.1，遇到 nzData 传递数据的问题
下面的 nzData 传值 categories
this.modalServiceFactory.create({ parentInjector: injector }).then(({ instance }) =>
instance.create({
nzTitle: '自定义分类展示顺序',
nzCentered: true,
nzContent: CategorySortComponent,
nzData: {
categories,
parent,
}
})
);
在 CategorySortComponent 中没有拿到 categories 的值
export class CategorySortComponent
implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked, AfterContentChecked {
@Input() categories?: BlogCategoryEditDto[] | null;
}
运行时上面的 categories 值是 undefined
请问如何解决这个问题？
最佳答案
0
通过 SO 上的 NgZorro Modal - How to pass data into the modal in Angular 16? 的回答知道了原因：
Use nzData and NZ_MODAL_DATA in Angular v16 and higher
Things changed with the upgrades to v16+ for both Angular and Ng-Zorro.
Ng-Zorro deprecated nzComponentParams in favor of nzData. It also switched to an injectable data sharing model. So if you're seeing this issue in v16 or higher, you'll need to switch to nzData and the injectable NZ_MODAL_DATA.
从 zg-zorro-antd 开始引入 injectable NZ_MODAL_DATA 获取 nzData 传过来的数据，不再支持 @Input() 方式
修改为下面的实现代码，问题解决
export class CategorySortComponent
implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked, AfterContentChecked {
@Input() categories?: BlogCategoryEditDto[] | null;
private readonly _nzModalData = inject(NZ_MODAL_DATA);
ngOnInit(): void {
this.categories = this._nzModalData.categories;
}
}
参考 ng-zorro-antd 官方 demo 代码：modal/demo/service.ts#L99
@dudu: 还有一种通过构造函数强类型的 inject 方法
export class BlogCategoryEditComponent implements OnInit {
private _category?: BlogCategoryEditDto | null;
constructor(
@Inject(NZ_MODAL_DATA)
private readonly nzModalData: BlogCategoryEditDto,
) {
this._category = this.nzModalData;
}
}
其他回答(1)
0
在 Angular 的升级中，尤其是配合 zg-zorro-antd 这样的 UI 库，有可能会遇到数据传递方面的问题。根据你提供的信息，似乎你在尝试通过 nzData 传递参数到 CategorySortComponent 组件时遇到了问题。
问题分析：
- 组件绑定：确保
CategorySortComponent使用了正确的输入属性绑定。在使用@Input()装饰器时，确保数据能够确实传入。 nzData传递方式：nzData是一种自定义的数据传递方式，确保你的modalServiceFactory是按照zg-zorro-antd的新版本实现的。- Angular 生命周期：在组件的生命周期中，数据可能在初始化时没有被赋值，导致抓取为空。
解决方案：
-
确认 Modal 的实现方式：确保你使用
zg-zorro-antd所有相关 API 的最新实现，这些 API 可能在版本中发生了变化。 -
使用
ngOnInit生命周期钩子：在CategorySortComponent中，可以在ngOnInit生命周期钩子中获取到传递的数据。确保你的代码如下所示：export class CategorySortComponent implements OnInit { @Input() categories?: BlogCategoryEditDto[] | null; ngOnInit(): void { console.log("Received categories:", this.categories); } } -
确保组件嵌套在 Modal 内部：确认
CategorySortComponent实际上是作为模态框的内容被加载的。如果不是，那么@Input()属性将无法接收到数据。 -
检查 Modal 引用：在
create方法中，确保nzContent参数正确地指向了你想用作模态框内容的组件，且没有拼写错误。 -
Direct Data Passing: 如果以上步骤都没有解决问题，考虑在创建模态框后直接通过组件实例设置数据，例如：
this.modalServiceFactory.create({ parentInjector: injector }).then(({ instance }) => { instance.create({ nzTitle: '自定义分类展示顺序', nzCentered: true, nzContent: CategorySortComponent, // 将 nzData 改为传递给 instance }); instance.categories = categories; // 直接赋值给实例属性 });
额外建议
- 查看文档：参考
zg-zorro-antd的官方文档，确保理解最新的 Modal 用法。 - 版本兼容性：升级后，查看是否有破坏性更改或新特性添加，必要时对调用方式进行调整。
- Debugging: 使用
console.log或 Angular 的调试工具检查categories的值在哪里丢失。
如果你在按照这些建议后仍然遇到问题，可以进一步调试或分享更具体的代码与上下文，以便帮助解决。
收获园豆：30
