如何将 Angular 组件渲染到 Node.Js 中的 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 component-based 动态生成的模板到用户的电子邮件。

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

您需要遵循的步骤；

在专用于仅显示电子邮件模板而非导航栏、全局 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>

You need to specify a route for this component as below, so when the user navigates to the welcome-email/username route it should show only the email template generated component.

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

根据伟大的 Angular SSR 指南 Server-side rendering (SSR) with Angular Universal.

两行代码而已

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

最后创建一个server-side 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 正文，此后您可以继续您的电子邮件发送功能。

Answer 2

我为@Googlian 的回答鼓掌。但是，angular 产生了太多不熟悉的 HTML5、CSS3 和 angular 特定的捆绑功能，所以在那之后，如果你想要一个真正有效的，你必须具体地一个一个地删除它们电子邮件内容，否则您的电子邮件很可能会被邮件客户端视为垃圾邮件。

我建议您使用 xHTML 标准的组件，但没有 CSS3、no-experimental HTML5 功能，并构建一个带有 this 和 ElementRef，然后手动解析必填字段。

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

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

How to Render an Angular Component to HTML in Node.Js (To Send EMails)

node.js

typescript

angular-universal

angular