从Angular发送电子邮件2

如何从angular度2应用程序发送电子邮件?

我正在主持一个关于firebase的Angular 2应用程序。 我想发送一个联系表格作为电子邮件。 理想情况下,我的解决scheme将使用Nodejs,但我愿意使用任何能够正确完成工作的任何东西。 下面是我的应用程序的细分。


客户端进度

这是我的forms:

<!-- 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(); } } 

当我点击提交button时,表单数据将成功显示在控制台中。


服务器端Nodejs的进展

我可以使用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,我也不知道如何通过点击提交button来激活sendmail.js中的代码。

任何帮助将不胜感激。 谢谢你的时间!

尝试重写您的sendmail.js作为rest服务,例如:

 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); }); } 

请注意,我使用电子邮件正文中的表单数据

然后在你的提交函数angular度,只是执行

 http.post('http://localhost:3000/send-mail', this.contactForm.value); 

编辑:我刚刚看到你在Firebase上的服务,我会研究如何改变的东西。

我如何在Firebase中运行服务器端代码?

Angular 2是客户端,如果你想做一个API调用你的秘密,你应该做的服务器端,也就是node.js或任何你的服务器。

因为sendmail.js是一个脚本,所以考虑使用node.js为你的Angular 2应用程序提供服务,并且使用一个带有express的API端点,比如/api/sendMail ,你可以从你的Angular 2应用程序发出一个XHR / AJAX请求。