如何在没有后端的情况下发送 Angular 6 表单？答案

【问题标题】：How to send angular 6 form without backend?如何在没有后端的情况下发送 Angular 6 表单？
【发布时间】：2018-08-25 01:55:45
【问题描述】：

我正在尝试使用 angular 6 创建一个网站并通过联系表单发送电子邮件。

本网站部署在 apache 服务器上，没有后端，只有 Angular 6 html 和 javascript 文件。

我的电子邮件地址有 maillet/mailgun 帐户、firebase 帐户和 smtp 访问权限。

是否可以仅使用 angular 6 发送电子邮件？我该怎么做？

谢谢。 :)

【问题讨论】：

您可以使用 Mailgun 的库或 API 并从您的角度组件进行调用。
您可能想看看EmailJS，它允许使用预先构建的模板从客户端Javascript代码发送电子邮件[披露-我是创建者之一]

标签： javascript angular apache

【解决方案1】：

你不能只使用 Angular 来做到这一点，这是一个使用 Angular 和一点 PHP 发送电子邮件的示例：

HTML 表单：

<form [formGroup]="subscribeForm" novalidate (ngSubmit)="sendMail($event)">
    <input type="text" placeholder="Enter your email" formControlName="email"/>
    <button class="button margin-top-15" type="submit">Subscribe</button>
</form>

Ts 文件：

export class MyComponent implements OnInit, OnDestroy {

    public subscribeForm: FormGroup;
    public email: FormControl;
    private unsubscribe = new Subject<void>();

    constructor(private databaseService: DatabaseService, private mailerService: MailerService, private http: HttpClient) { }

    ngOnInit() {
        this.createFormControls();
        this.createForm();
    }

    createFormControls() {
        this.email = new FormControl('', [
            Validators.required
        ]);
    }

    createForm() {
        this.subscribeForm = new FormGroup({
            email: this.email
        });
    }

    sendMail() {
        if (this.subscribeForm.valid) {
            this.http.post("link to the php file.", email).subscribe();
        }
    }

    ngOnDestroy(): void {
        this.unsubscribe.next();
        this.unsubscribe.complete();
    }

}

在php文件中：

<?php
    header('Content-type: application/json');
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
    $request = json_decode(file_get_contents("php://input"));
    $from_email = "your email goes here";

    $message = "Welcome.";

    $from_name = "your name goes here";

    $to_email = $request->email;

    $contact = "<p><strong>Name:</strong>$from_name</p><p><strong>Email:</strong> $from_email</p>";

    $email_subject = "Angular Php Email Example: Neue Nachricht von $from_name erhalten";

    $email_body = '<html><body>';
    $email_body .= "$<p><strong>Name:</strong>$from_name</p><p><strong>Email:</strong> $from_email</p>
                    <p>$message</p>";
    $email_body .= '</body></html>';

    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    $headers .= "From: $from_email\n";
    $headers .= "Reply-To: $from_email";

    mail($to_email,$email_subject,$email_body,$headers);

    $response_array['status'] = 'success';
    $response_array['from'] = $from_email;

    echo json_encode($response_array);
    echo json_encode($from_email);
    header($response_array);
    return $from_email;
?>

【讨论】：

非常感谢 Ayoub ！我很反感看到解决方案如此简单...... :(