Angular与TypeScript：SendGrid场景下HTML解析方法示例求助

嘿，我看到你正在尝试用TypeScript拼接HTML邮件内容对接SendGrid发送——手动拼字符串不仅容易写错标签，维护起来也头疼，这里有几个更靠谱的方案，适配不同场景：

1. 用TypeScript模板字符串（最基础的优化） #

直接用ES6+的模板字符串替换生硬的字符串拼接，可读性拉满，还不用手动转义<>这类字符，写HTML就跟写普通页面一样：

sendEmail(firstname: string, lastname: string) {
  // 直接写HTML标签，变量用${}插入，格式更清爽
  const body = `
    <h1>Dear ${lastname}, ${firstname.charAt(0).toUpperCase()}</h1>
    <table>
      <tr>
        <td>This is a table</td>
      </tr>
    </table>
  `;
  
  // 后续SendGrid请求逻辑...
  const url = `https://us-central1-xxxxxx.cloudfunctions.net/httpEmail`;
  const params = new URLSearchParams({
    html: body,
    // 补充其他必要参数：收件人、主题等
  });
  // 发送请求（比如fetch/axios）...
}

适用场景：邮件结构简单，不需要复杂逻辑的小场景，零额外依赖，直接用原生语法就能搞定。

2. 使用模板引擎（Handlebars为例） #

如果邮件模板复杂、有循环/条件判断，用模板引擎把HTML和逻辑分离会更清晰。以Handlebars为例，先定义模板，再传入数据渲染：

首先安装依赖：

npm install handlebars @types/handlebars

然后在代码中使用：

import Handlebars from 'handlebars';

// 定义HTML模板（可以单独放在.ts/.html文件里，多人协作维护更方便）
const emailTemplate = `
  <h1>Dear {{lastname}}, {{firstLetterUpperCase firstname}}</h1>
  <table>
    {{#if showTable}}
      <tr>
        <td>This is a table</td>
      </tr>
    {{/if}}
  </table>
`;

// 注册自定义 helper（比如实现首字母大写逻辑）
Handlebars.registerHelper('firstLetterUpperCase', (name: string) => {
  return name.charAt(0).toUpperCase();
});

sendEmail(firstname: string, lastname: string) {
  const template = Handlebars.compile(emailTemplate);
  // 传入数据渲染最终HTML
  const body = template({
    firstname,
    lastname,
    showTable: true // 可根据业务逻辑控制内容显示
  });

  // 后续SendGrid请求逻辑...
}

适用场景：邮件包含复杂逻辑（循环、条件分支），需要多人协作维护模板的场景。

3. 用React/JSX生成HTML（React栈项目专属） #

如果你的项目已经用了React，完全可以用组件化的方式写邮件模板，再通过ReactDOMServer把JSX转换成HTML字符串，复用React的组件化能力：

首先确保安装依赖：

npm install react react-dom @types/react @types/react-dom

然后编写邮件组件并渲染：

import React from 'react';
import { renderToString } from 'react-dom/server';

// 邮件组件，跟普通React组件写法一致
const EmailTemplate = ({ firstname, lastname }: { firstname: string; lastname: string }) => {
  return (
    <>
      <h1>Dear {lastname}, {firstname.charAt(0).toUpperCase()}</h1>
      <table>
        <tr>
          <td>This is a table</td>
        </tr>
      </table>
    </>
  );
};

sendEmail(firstname: string, lastname: string) {
  // 把React组件渲染成HTML字符串
  const body = renderToString(<EmailTemplate firstname={firstname} lastname={lastname} />);

  // 后续SendGrid请求逻辑...
}

适用场景：项目本身基于React栈，想要复用组件、hooks等能力，或者邮件模板需要模块化拆分的场景。

4. 用SendGrid动态模板（推荐用于生产环境） #

其实SendGrid本身就提供了动态模板功能，你可以在SendGrid后台可视化创建邮件模板，定义变量占位符，代码里只需要传变量值就行，完全不用在代码里写HTML：

1. 先在SendGrid后台创建动态模板，添加占位符比如{{lastname}}、{{firstnameInitial}}
2. 代码中调用SendGrid API时，传入dynamic_template_data：

import sgMail from '@sendgrid/mail';

sgMail.setApiKey('你的SendGrid API Key');

sendEmail(firstname: string, lastname: string) {
  const msg = {
    to: '收件人邮箱',
    from: '发件人邮箱',
    templateId: '你在SendGrid后台创建的模板ID',
    dynamic_template_data: {
      lastname,
      firstnameInitial: firstname.charAt(0).toUpperCase()
    }
  };

  sgMail.send(msg);
}

适用场景：生产环境，需要频繁修改邮件模板（不用改代码，直接在SendGrid后台编辑），或者多语言/多版本邮件的场景，还能利用SendGrid的模板统计功能。

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