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

Question

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

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

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

我知道Angular Universal 绝对可以实现服务器端渲染。但我不确定如何显式渲染一个特定的组件。

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 }

1. 根据出色的 Angular SSR 指南 Server-side rendering (SSR) with Angular Universal 在您的项目中实施 Angular SSR。

只有两行代码。

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

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

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正文，然后你可以继续你的电子邮件发送功能。

Answer 2

我为@Googlian 的回答鼓掌。但是，Angular 会产生太多不熟悉的 HTML5、CSS3 和特定于 Angular 的捆绑功能，因此如果您想要真正有效的电子邮件内容，则必须专门删除这些功能，否则您的电子邮件很可能会被视为垃圾邮件客户端。

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

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