如何在 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 组件的动态生成的模板从 Angular SSR 项目发送到用户的电子邮件。

在此答案底部找到示例存储库。

您需要遵循的步骤；

1. 在单独的路由路径中设计您的模板，该路径专用于仅显示电子邮件模板，而不是您的导航栏、全局 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路由时，它应该只显示电子邮件模板生成的组件。

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

2. 从伟大的 Angular SSR 指南、使用 Angular Universal 的服务器端渲染 (SSR)为您的项目实施 Angular SSR 。

这只是两行代码。

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

3. 最后创建一个服务器端 API 来从您的 Angular 组件生成模板并发送电子邮件或提供单个组件的 HTML 代码，在您的 API 函数中添加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 正文，此后您可以继续您的电子邮件发送功能。