如何使用Angular 7发送电子邮件

Question

我怎样在Angular 7中创建一个电子邮件服务，并包含发送电子邮件方法？

例如：

// email.service.ts
import { Injectable } from ‘@angular/core’;

@Injectable()

export class EmailService {

    constructor() { }

    // method to fetch data from server
    public sendEmail(): void {
       // logic to send email
      ...
    }
}

我对使用Angular进行开发还很陌生，因此非常感谢提供任何示例、用例或代码片段。

- Mokka soru

---

据我所知，从JS直接实现这个是不可能的，但你可以编写一个带有HTTP API的Web服务器或使用已经存在的第三方服务器来实现，然后你只需要从你的Angular应用程序中调用它即可。 - Amir Arbabian

我认为在Angular中这是不可能的。 - user11113799

Angular是一个前端视图框架，不是服务器事务智能，而是浏览器智能。因此，浏览器无法发送电子邮件，所以很遗憾，Angular不能使用其自己内置的API发送电子邮件。您需要一个具有服务器智能的后端服务来实现电子邮件事务。这将取决于您想要使用什么。实现API以处理这些事务。 - Mosia Thabo

Answer 1

您可以使用一些BaaS（后端即服务）提供者，例如Formspree。它非常简单易用，使您能够发送电子邮件而无需编写或设置后端。您只需从Angular应用程序发布Http请求，此服务会处理其余部分。

1. 在formspree.io上创建账户。
2. 点击“+新表单”按钮。
3. 输入您想要接收电子邮件的电子邮件地址。

然后，您将获得一个针对此新创建的表单的唯一终端节点，您可以使用它从您的Angular应用程序中发送（发布）电子邮件。终端节点看起来类似于：https://formspree.io/asdlf7asdf

下面是使用模板驱动表单的示例代码：

HTML表单

<form (ngSubmit)="onSubmit(contactForm)" #contactForm="ngForm">
    <input type="text" placeholder="Name" name="name" ngModel required #name="ngModel">
    <input type="text" placeholder="Email" email name="email" ngModel required #email="ngModel">
    <textarea placeholder="Messages" name="messages" ngModel required #messages="ngModel"></textarea>
    <input type="submit" value="Send">
</form>

背后的代码

 onSubmit(contactForm: NgForm) {
    if (contactForm.valid) {
      const email = contactForm.value;
      const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
      this.http.post('https://formspree.io/asdlf7asdf',
        { name: email.name, replyto: email.email, message: email.messages },
        { 'headers': headers }).subscribe(
          response => {
            console.log(response);
          }
        );
    }
  }

您可以通过此服务（或其他服务）做更多的事情，但这就是其基本要点。

- Davíð Már Gunnarsson

Answer 2

Angular在客户端工作，如果要发送电子邮件，则需要服务器，因此我认为现在仅使用Angular发送电子邮件是不可能的，您需要使用服务器端应用程序发送电子邮件。

- Dhaval

Answer 3

这是不可能通过Angular发送电子邮件。 但是，您可以创建Node Js express服务器，然后从那里发送电子邮件。 我已经使用以下项目来实现： https://github.com/niftylettuce/email-templates， 它可以帮助您发送电子邮件。

- Amit Baranes

---

你好，你知道如何在TypeScript中使用这个吗？我不确定如何导入EmailTemplate...谢谢。 - Rachel

Answer 4

首先，您需要了解 Angular 的本质。但是假设您是 Angular 的新手 - 您必须了解 Angular 只是一个视图前端框架。因此，它没有自己发送电子邮件的能力。为了使 Angular 具有事务处理功能，您需要一个后端系统，Angular 可以告诉该系统代表它发送电子邮件。

这是通过 Web API 实现的。因此，您必须创建一个 API，其中 Angular 可以通知 API 发送电子邮件。就我所知，这是最广泛使用的方法。

- Mosia Thabo

---

你能给我一些关于如何制作API并调用它来发送电子邮件的想法吗？ - Mokka soru