Angular 15中如何向NzMessageService传递动态TemplateRef？

我正在开发一个Angular应用，使用Ng-Zorro Ant Design的NzMessageService展示消息时，尝试向其传递动态TemplateRef遇到了类型不匹配的问题。

简化后的代码如下：

import { Injectable, TemplateRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

@Injectable({
  providedIn: 'root',
})
export class DynamicMessageService {
  constructor(private messageService: NzMessageService) {}

  showMessage(dynamicText: string | TemplateRef<void>): void {
    // 尝试创建动态组件或视图并传递给NzMessageService，但遇到类型不匹配问题
    this.messageService.create('error', /* ??? */, { nzDuration: 80000 });
  }
}

dynamicText可以是字符串或TemplateRef，请问在Angular中实现此需求的最佳方法是什么？

基础实现：直接传递字符串或TemplateRef #

Ng-Zorro的NzMessageService.create()方法本身就支持直接传入TemplateRef作为第二个参数，无需额外处理，直接通过类型判断传入即可：

showMessage(dynamicText: string | TemplateRef<void>): void {
  // 直接根据dynamicText的类型传入，NzMessageService会自动处理两种类型
  this.messageService.create('error', dynamicText, { nzDuration: 80000 });
}

动态生成TemplateRef（针对HTML字符串场景） #

如果你的dynamicText是需要动态渲染的HTML字符串（而非预定义的TemplateRef），可以通过ViewContainerRef配合创建动态模板：

1. 在服务中注入ViewContainerRef：

import { Injectable, TemplateRef, ViewContainerRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

@Injectable({
  providedIn: 'root',
})
export class DynamicMessageService {
  constructor(
    private messageService: NzMessageService,
    private viewContainerRef: ViewContainerRef
  ) {}

2. 添加HTML转TemplateRef的工具方法：

private htmlToTemplate(html: string): TemplateRef<void> {
  // 创建临时ng-template元素
  const templateEl = document.createElement('ng-template');
  templateEl.innerHTML = html;
  
  // 创建嵌入式视图并挂载到临时模板
  const view = this.viewContainerRef.createEmbeddedView(
    TemplateRef.prototype as TemplateRef<void>,
    {},
    { injector: this.viewContainerRef.injector }
  );
  
  view.rootNodes.forEach(node => templateEl.content.appendChild(node));
  this.viewContainerRef.detach(); // 移除临时视图避免内存泄漏
  
  return templateEl as unknown as TemplateRef<void>;
}

3. 修改showMessage方法处理两种输入类型：

showMessage(dynamicText: string | TemplateRef<void>): void {
  let content = dynamicText;
  
  // 若为字符串，转换为TemplateRef
  if (typeof dynamicText === 'string') {
    content = this.htmlToTemplate(dynamicText);
  }
  
  this.messageService.create('error', content, { nzDuration: 80000 });
}

注意事项 #

• 优先使用预定义的TemplateRef，避免动态编译带来的性能损耗
• 动态渲染HTML时需注意XSS风险，确保输入内容可信
• Ng-Zorro会自动处理TemplateRef的渲染，无需手动挂载视图

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