如何使用 Angular 7 发送电子邮件 [关闭]答案

【问题标题】：How to send email using Angular 7 [closed]如何使用 Angular 7 发送电子邮件 [关闭]
【发布时间】：2019-07-17 21:16:03
【问题描述】：

如何在 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 开发的新手，因此非常感谢任何示例、用例和/或代码 sn-ps。

【问题讨论】：

据我所知，直接使用 js 是不可能的，但您可以使用 http api 编写 web 服务器 或使用已经存在的第三方服务器可以做到这一点，你只需要从你的angular应用程序中调用它。
我认为 Angular 是不可能的
Angular 是一个前端视图框架，不是服务器事务智能，而是浏览器智能。就此而言，浏览器无法发送电子邮件，因此不幸的是，Angular 无法使用其自己的内置 API 发送电子邮件。您需要一个服务器智能的后端服务来实现电子邮件交易。这将取决于您要使用什么。实现 API 来处理这些事务。

标签： angular typescript email scripting angular-services

【解决方案1】：

Angular 在客户端工作，发送电子邮件需要服务器，所以我认为现在只使用 Angular 发送电子邮件是不可能的，你需要使用服务器端应用程序发送电子邮件。

【讨论】：

【解决方案2】：

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

【讨论】：

您好，您知道如何在打字稿中使用它吗？我不知道如何导入 EmailTemplate...谢谢。

【解决方案3】：

您首先需要了解 Angular 的本质。但是假设你是 Angular 的新手——你必须明白 Angular 只是一个视图前端框架。所以它没有能力自己发送电子邮件。为了使 Angular 能够交易，您需要一个后端系统，Angular 可以告诉它代表它发送电子邮件。

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

【讨论】：

你能告诉我如何制作 api 并调用它来发送电子邮件

【解决方案4】：

您可以使用一些 BaaS（后端即服务）提供商，例如 Formspree。它使用起来非常简单，使您无需编写或设置后端即可发送电子邮件。您所要做的就是从您的 Angular 应用程序中发布一个 Http 请求，然后由该服务负责其余的工作。

在 formspree.io 创建一个帐户
点击“+新建表单”按钮
输入您要接收电子邮件的电子邮件

然后，您将获得这个新创建的表单的唯一端点，您可以使用它从您的 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);
          }
        );
    }
  }

您可以使用此（或其他）服务做更多事情，但这将是它的基本要点。

【讨论】：