NG-ZORRO/ng-zorro-antd 通知服务NzNotificationService的数据传递问题解析

问题背景

NG-ZORRO作为Angular的企业级UI组件库，其通知服务NzNotificationService是开发者常用的功能之一。在实际开发中，开发者经常需要通过通知服务传递自定义数据到模板中，但近期发现NzNotificationService在传递nzData到模板时存在数据未正确传递的问题。

问题现象

当开发者尝试使用NzNotificationService创建通知并传递自定义数据时，模板中无法获取到传入的nzData参数。具体表现为：

1. 开发者通过NzNotificationService.error()等方法创建通知
2. 传入包含nzData参数的对象
3. 在模板中使用let-data语法获取数据时，data始终为undefined

技术分析

通过查看NG-ZORRO的源码，发现问题的根源在于通知组件的模板实现方式。当前实现中，通知内容模板使用了ng-template而非ng-container，这导致了上下文数据传递的失效。

在Angular中，ng-template和ng-container在处理上下文数据时有重要区别：

• ng-template会创建一个新的模板实例，但不会自动继承父级上下文
• ng-container则是一个逻辑容器，不会创建额外的DOM元素，能更好地保持上下文链

解决方案

目前开发者可以通过以下两种方式解决此问题：

临时解决方案

使用service.template()方法创建通知，这种方式可以正确传递数据，但会失去默认的图标显示功能。示例代码如下：

this.notification.template(tpl, {
  nzData: { name: 'Test' }
});

官方修复方案

NG-ZORRO团队已经确认此问题，并在最新版本中进行了修复。修复方案主要包括：

1. 将通知组件中的ng-template替换为ng-container
2. 完善类型定义，确保数据传递的类型安全
3. 保持原有功能的同时修复数据传递问题

最佳实践建议

对于使用NG-ZORRO通知服务的开发者，建议：

1. 及时升级到包含此修复的最新版本
2. 如果暂时无法升级，可采用上述临时解决方案
3. 在传递复杂数据时，确保数据类型与模板期望的类型一致
4. 对于需要自定义图标的情况，可以在模板中手动添加图标元素

总结

NzNotificationService的数据传递问题是NG-ZORRO使用过程中可能遇到的一个典型问题。通过理解Angular模板上下文的工作原理，开发者可以更好地应对类似问题。NG-ZORRO团队对此问题的快速响应也体现了开源社区的高效协作精神。

对于企业级应用开发，建议开发者关注组件库的更新日志，及时应用修复和优化，以确保应用的稳定性和功能的完整性。