如何在Node.Js中将Angular组件渲染为HTML（用于发送电子邮件）

Question

假设我有一个简单的Angular组件:

@Component({
  selector: 'app-email-content',
  template: '<h1>Welcome {{username}}!</h1>'
})
export class WelcomeEmailComponent {
  @Input() username: string
}

我的目标是使用Node.Js将此Angular组件呈现为纯HTML，以发送定制的电子邮件。

我知道使用Angular Universal肯定可以进行服务器端渲染。但我不确定如何显式地呈现一个特定的组件。

- Florian Ludewig

---

你能否发布一些你已经尝试过的示例？同时请提供你使用的Angular版本。 - Googlian

参考带有少量改进的答案。 - Googlian

@Googlian 太棒了！我会在接下来的几天里研究一下 :) - Florian Ludewig

Answer 1

这种方法是从Angular SSR项目向用户的电子邮件发送基于Angular组件动态生成的模板。

在本回答底部找到示例存储库。

您需要遵循以下步骤：

1. 在专门用于显示电子邮件模板而不是导航栏、全局CSS等的单独路由路径中设计您的模板。

例如：

welcome-email-component.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-welcome-email-component',
  templateUrl: './welcome-email-component.component.html',
  styleUrls: ['./welcome-email-component.component.css']
})
export class WelcomeEmailComponentComponent implements OnInit {

  username: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.username = params.username;
    });
  }

}

welcome-email-component.component.html

<style>
    .title-p {
        color: #00025a;
        font-size: 20px;
        font-weight: bold;
    }
</style>

<p class="title-p">Welcome {{username}}</p>

您需要按照以下方式为此组件指定路由，因此当用户导航到welcome-email/username路由时，只应显示生成的电子邮件模板组件。

{ path: 'welcome-email/:username', component: WelcomeEmailComponentComponent }

2. 从Angular Universal指南中学习如何实现Angular SSR：使用Angular Universal实现服务端渲染（SSR）。

只需要两行代码。

ng add @nguniversal/express-engine
npm run dev:ssr

3. 最后创建一个服务端 API，从 Angular 组件生成模板并发送电子邮件或提供单个组件的 HTML 代码，将 API 函数添加到您的 server.ts 中，如下所示。

server.ts

server.get('/api/send-email/:username', (req, res) => {
    // Below is the URL route for the Angular welcome mail component
    request(`http://127.0.0.1:4200/welcome-email/${req.params.username}`, (error, response, body) => {
        // TODO : Send email to the user from WelcomeEmailComponentComponent.ts component as `body`
        // use the body to send email
        res.send('Email sent');
    });
});

示例代码：https://github.com/aslamanver/angular-send-component-email

这个仓库演示了如何动态生成组件;

最终，当您访问/api/send-email/:username时，它将生成欢迎邮件组件并提供该组件的HTML正文，之后您可以继续执行您的电子邮件发送功能。

- Googlian

---

如何移除 script-src 标签？ - Amala Amala

通过使用Node.js，您可以在发送电子邮件之前进行服务器端验证，并根据您的要求自定义标签。 - Googlian

@Googlian 这是一个非常聪明的方法。感谢你的努力！ - Florian Ludewig

@Flo 非常感谢您的赞赏，不用客气。 - Googlian

Answer 2

我赞同@Googlian的回答。但是，Angular生成了太多不熟悉的HTML5、CSS3和Angular特定的捆绑功能，因此如果您想要一个真正有效的电子邮件内容，那么您必须一一具体地删除它们，否则您的电子邮件很可能会被邮件客户端视为垃圾邮件。

我建议您使用符合xHTML标准的组件，没有CSS3、没有实验性HTML5功能，并使用this和ElementRef构建电子邮件模板，然后手动解析所需字段。

将字符串发送到服务器端nodejs，然后作为电子邮件发送。您可以使用nodemailer。

- cagcak

---

感谢您提供这个有用的答案，无关紧要的CSS和JS导入可以从服务器端验证中删除。 - Googlian