求推荐支持邮件变量个性化的Angular 14+插件

1. Handlebars 集成（成熟通用） #

Handlebars是广泛使用的模板引擎，支持{{variable}}格式的变量替换，完美适配Angular 14+。

• 安装命令：

  npm install handlebars @types/handlebars --save
  

• 组件内使用示例：

  import * as Handlebars from 'handlebars';
  
  export class MailTemplateComponent {
    // 定义带变量的邮件模板
    mailTemplate = '您好，{{name}}！您的订单{{orderId}}已完成发货。';
    // 变量数据
    templateData = { name: '张三', orderId: 'OD20240501' };
  
    getRenderedContent(): string {
      const compiledTemplate = Handlebars.compile(this.mailTemplate);
      return compiledTemplate(this.templateData);
    }
  }
  

  渲染后输出：您好，张三！您的订单OD20240501已完成发货。

2. ngx-template-manager（Angular专属） #

专为Angular打造的模板管理库，支持自定义变量标识（如{name}、[$username]等格式），适配14+版本。

• 安装命令：

  npm install ngx-template-manager --save
  

• 自定义变量规则示例：

  import { TemplateManagerService } from 'ngx-template-manager';
  
  export class MailComponent {
    constructor(private templateManager: TemplateManagerService) {}
  
    renderPersonalizedMail(): string {
      const template = '欢迎加入，{name}！您的专属邀请码是[$code]';
      const variableData = { name: '李四', code: 'ABC123' };
      
      // 配置多格式变量匹配规则
      return this.templateManager.replace(template, variableData, [
        // 匹配{xxx}格式
        { pattern: /{(\w+)}/g, replacement: (_, key) => variableData[key] || '' },
        // 匹配[$xxx]格式
        { pattern: /\[(\$[\w]+)\]/g, replacement: (_, key) => variableData[key.slice(1)] || '' }
      ]);
    }
  }
  

3. 原生Angular实现（轻量场景） #

如果仅需简单变量替换，无需额外插件，可通过自定义管道快速实现：

• 自定义管道代码：

  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({ name: 'mailVarReplace' })
  export class MailVarReplacePipe implements PipeTransform {
    transform(template: string, data: Record<string, any>): string {
      // 匹配{xxx}格式的变量，替换为对应数据
      return template.replace(/\{(\w+)\}/g, (_, key) => data[key] || '未知');
    }
  }
  

• 模板中使用：

  <div>{{ '尊敬的{name}，您的账户已激活。' | mailVarReplace: {name: '王五'} }}</div>
  

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