[英]How to Render an Angular Component to HTML in Node.Js (To Send EMails)
Let's say I have a simple Angular Component:假设我有一个简单的 Angular 组件:
@Component({
selector: 'app-email-content',
template: '<h1>Welcome {{username}}!</h1>'
})
export class WelcomeEmailComponent {
@Input() username: string
}
My goal is to take this Angular component and render it to plain HTML with Node.Js, to send customized EMails.我的目标是使用这个 Angular 组件并使用 Node.Js 将其呈现为普通的 HTML,以发送自定义的电子邮件。
I know that Server-side rendering is definitely possible with Angular Universal .我知道服务器端渲染绝对可以使用Angular Universal 。 But I am not sure how to explicitly render one specific component.
但我不确定如何显式呈现一个特定组件。
The approach is to send an Angular component-based dynamically generated templates to users' email from the Angular SSR project.做法是从Angular SSR项目向用户email发送一个Angular基于组件的动态生成模板。
Find the example repository at the bottom of this answer.在这个答案的底部找到示例存储库。
The steps you need to follow;您需要遵循的步骤;
Example:例子:
welcome-email-component.component.ts欢迎电子邮件-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欢迎电子邮件-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.您需要为该组件指定一个路由,如下所示,因此当用户导航到
welcome-email/username
路由时,它应该只显示 email 模板生成的组件。
{ path: 'welcome-email/:username', component: WelcomeEmailComponentComponent }
It's just two lines of code.这只是两行代码。
ng add @nguniversal/express-engine
npm run dev:ssr
server.ts
as below.server.ts
中,如下所示。 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');
});
});
Example code: https://github.com/aslamanver/angular-send-component-email示例代码: https://github.com/aslamanver/angular-send-component-email
The demonstration of a dynamically generated component on this repository;在此存储库上动态生成的组件的演示;
Finally when you access /api/send-email/:username
, this will generate the welcome mail component and give the HTML body of that, thereafter you can proceed with your email sending function.最后,当您访问
/api/send-email/:username
时,这将生成欢迎邮件组件并提供 HTML 正文,此后您可以继续您的 email 发送 function。
I clap @Googlian's answer.我鼓掌@Googlian 的回答。 But, angular produces too much unfamiliar HTML5, CSS3 and angular specific bundled features, so after that you have to remove those one by one specifically if you want a real valid email content, otherwise your email most probably will be considered as spam bu mailclients.
但是,angular 产生了太多不熟悉的 HTML5、CSS3 和 angular 特定的捆绑功能,因此之后,如果您想要真正有效的 email 内容,则必须一一删除这些内容,否则您的 8838851837012 将被视为垃圾邮件客户端 mailbuclient81837012
I sugges that you mah have a component with xHTML standarts with no-CSS3, no-experimental HTML5 features, and build an email templete with this
and ElementRef
, then parse required fields manually.我建议您拥有一个具有 xHTML 标准的组件,该组件具有无 CSS3、无实验性 HTML5 功能,并使用
this
和ElementRef
构建一个 email 模板,然后手动解析所需字段。
Send the string to serverside, nodejs, then send it as email. You can use nodemailer将字符串发送到服务器端,nodejs,然后将其作为 email 发送。您可以使用 nodemailer
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.