如何在 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项目向用户email发送一个Angular基于组件的动态生成模板。

在这个答案的底部找到示例存储库。

您需要遵循的步骤；

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

例子：

欢迎电子邮件-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;
    });
  }

}

欢迎电子邮件-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路由时，它应该只显示 email 模板生成的组件。

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

2. 根据伟大的 Angular SSR 指南，使用 Angular Universal将 Angular SSR 实施到您的项目。

这只是两行代码。

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

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

服务器.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 正文，此后您可以继续您的 email 发送 function。

Answer 2

我鼓掌@Googlian 的回答。 但是，angular 产生了太多不熟悉的 HTML5、CSS3 和 angular 特定的捆绑功能，因此之后，如果您想要真正有效的 email 内容，则必须一一删除这些内容，否则您的 8838851837012 将被视为垃圾邮件客户端 mailbuclient81837012

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

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