[英]Sending Email from Angular 2
我在firebase上托管了一个Angular 2应用程序。 我想发一封联系表格作为电子邮件。 理想情况下,我的解决方案将使用Nodejs,但我愿意使用能够正确完成工作的任何东西。 以下是我的应用的细分。
这是我的表格:
<!-- contact-form.component.html --> <form [formGroup]="formService.contactForm" (ngSubmit)="formService.onSubmitForm()"> <input type="text" formControlName="userFirstName"> <label>First Name</label> <input type="text" formControlName="userLastName"> <label>Last Name</label> <button type="submit">SUBMIT</button> </form>
这是我的联系表单组件:
// contact-form.component.ts import { Component } from '@angular/core'; import { ContactFormService } from './contact-form.service'; @Component({ selector: 'contact-form', templateUrl: './contact-form.component.html', styleUrls: ['./contact-content.component.css'], providers: [ContactFormService] }) export class ContactFormComponent { constructor(private formService: ContactFormService) { formService.buildForm(); } }
这是我的联系表格服务:
// contact-form.service.ts import { Injectable } from '@angular/core'; import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; @Injectable() export class ContactFormService { constructor(public formBuilder: FormBuilder) { } contactForm: FormGroup; formSubmitted: boolean = false; buildForm() { this.contactForm = this.formBuilder.group({ userFirstName: this.formBuilder.control(null, Validators.required), userLastName: this.formBuilder.control(null, Validators.required) }); } onSubmitForm() { console.log(this.contactForm.value); this.formSubmitted = true; this.contactForm.reset(); } }
单击“提交”按钮时,表单数据将成功显示在控制台中。
我可以使用SendGrid和Nodejs从命令提示符成功发送电子邮件:
示例:sendmail.js
var Sendgrid = require('sendgrid')( process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>' ); var request = Sendgrid.emptyRequest({ method: 'POST', path: '/v3/mail/send', body: { personalizations: [{ to: [{ email: 'my.email@gmail.com' }], subject: 'Sendgrid test email from Node.js' }], from: { email: 'noreply@email-app.firebaseapp.com' }, content: [{ type: 'text/plain', value: 'Hello Joe! Can you hear me Joe?.' }] } }); Sendgrid.API(request, function (error, response) { if (error) { console.log('Mail not sent; see error message below.'); } else { console.log('Mail sent successfully!'); } console.log(response); });
如果我在命令提示符下键入此邮件,则会成功发送电子邮件:
node sendmail
但是,我无法弄清楚如何将我提交的表单数据链接到sendmail.js,而且我也无法弄清楚如何通过单击提交按钮来激活sendmail.js中的代码。
任何帮助将不胜感激。 谢谢你的时间!
尝试将sendmail.js重写为休息服务,例如:
const Sendgrid = require('sendgrid')(
process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>'
);
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.post('/send-mail', function (req, res) {
// PUT your send mail logic here, req.body should have your fsubmitted form's values
sendMail(req.body);
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.send('SEND MAIL');
})
app.listen(3000, function () {
console.log('LISTENING on port 3000');
})
function sendMail(formData) {
let request = Sendgrid.emptyRequest({
method: 'POST',
path: '/v3/mail/send',
body: {
personalizations: [{
to: [{ email: 'my.email@gmail.com' }],
subject: 'Sendgrid test email from Node.js'
}],
from: { email: 'noreply@email-app.firebaseapp.com' },
content: [{
type: 'text/plain',
value: `Hello ${formData.userFirstName} ${formData.userLastName}! Can you hear me ${formData.userFirstName}?.`
}]
}
});
Sendgrid.API(request, function (error, response) {
if (error) {
console.log('Mail not sent; see error message below.');
} else {
console.log('Mail sent successfully!');
}
console.log(response);
});
}
请注意,我在电子邮件正文中使用了表单数据
然后在你的提交函数中,只需执行
http.post('http://localhost:3000/send-mail', this.contactForm.value);
编辑:我刚刚看到你在Firebase上服务,我将研究这是如何改变的。
Angular 2是客户端,如果你想用你的秘密做一个API调用你可能应该在服务器端,也就是node.js或者你的服务器。
因为你有sendmail.js
作为脚本,考虑使用node.js为你的Angular 2应用程序提供服务,并且有一个带有express的API端点,比如/api/sendMail
,你可以从你的Angular 2应用程序发出XHR / AJAX请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.