Question

我学习角度2，我没有在网上看到任何一个例子，从angular 2发送一个简单的联系表格到php脚本。

我的html模板。

In [259]: np.ix_([0,2,4],[1,2,3])
Out[259]: 
(array([[0],
        [2],
        [4]]), array([[1, 2, 3]]))

PHP脚本

x[[0,2,4], [1,2,3]]

我的不完整的角度2分量。我已经在我的应用程序组件HttpModule和FormsModule

中导入了

<form novalidate="" (ngSubmit)="guardar(forma)" #forma="ngForm">
    <div class="field">
        <label for="name">Nombre:</label>
        <input type="text"
               id="name"
               name="name"
               required
               minlength="3"
               ngModel>
    </div>

    <div class="field">
        <label for="email">Email:</label>
        <input type="email"
               id="email"
               name="email"
               required
               ngModel
               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
    </div>

    <div class="field">
        <label for="message">Mensaje:</label>
        <textarea id="message"
                  name="message"
                  required
                  ngModel></textarea>
    </div>

    <div class="field">
        <button [disabled]="!forma.valid"
                type="submit">
            Enviar
        </button>
    </div>
</form>

Answer 1

你好像被困在Angular和PHP之间的接口上 - 这是可以理解的，因为它不像通过$_POST超全局访问变量那么简单。

默认情况下，Angular将请求正文中传递给它的数据作为 json 字符串提交，因此您必须访问原始请求正文并将其解析为可用的PHP变量。

以下示例显示了在没有额外框架或其他依赖项的情况下执行此操作的最基本方法。您可以（并且应该）遵循更好的组织实践并将此内容移至服务中，但这会增加额外的复杂性，而这里不需要：

import { Component, OnInit } from '@angular/core';
import {Http} from "@angular/http";

@Component({
  selector: 'app-mailer',
  template: '<button (click)="sendEmail()">Send the Email</button>'
})
export class MailerComponent implements OnInit {

  email : string;
  name : string;
  message : string;
  endpoint : string;

  http : Http;

  constructor(http : Http) {
    this.http = http;
  }

  ngOnInit() {
    //This data could really come from some inputs on the interface - but let's keep it simple.
    this.email = "hpierce@example.com";
    this.name = "Hayden Pierce";
    this.message = "Hello, this is Hayden.";

    //Start php via the built in server: $ php -S localhost:8000
    this.endpoint = "http://localhost:8000/sendEmail.php";
  }

  sendEmail(){
    let postVars = {
      email : this.email,
      name : this.name,
      message : this.message
    };

    //You may also want to check the response. But again, let's keep it simple.
    this.http.post(this.endpoint, postVars)
        .subscribe(
            response => console.log(response),
            response => console.log(response)
        )
  }
}

和PHP脚本。请注意，这会检查多个请求方法。它也会检查OPTIONS请求。 See why this is nessesary

为了尽可能简化，我跳过了对Angular的输入的清理，这被认为是一个严重的安全问题。您应该将其添加到面向应用的生产中：

<?php

switch($_SERVER['REQUEST_METHOD']){
    case("OPTIONS"): //Allow preflighting to take place.
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: POST");
        header("Access-Control-Allow-Headers: content-type");
        exit;
    case("POST"): //Send the email;
        header("Access-Control-Allow-Origin: *");

        $json = file_get_contents('php://input');

        $params = json_decode($json);

        $email = $params->email;
        $name = $params->name;
        $message = $params->message;

        $recipient = 'targetInbox@exmaple.com';
        $subject = 'new message';
        $headers = "From: $name <$email>";

        mail($recipient, $subject, $message, $headers);
        break;
    default: //Reject any non POST or OPTIONS requests.
        header("Allow: POST", true, 405);
        exit;
}

Answer 2

对于任何有兴趣在更高版本的Angular中执行此操作的人，您会注意到@angular/http已过时，不能无错误使用。

您应该从HPierce执行上述所有操作，但改用HttpClient：

import {HttpClient} from "@angular/common/http";

然后将所有类型转换为HttpClient，例如：

http : HttpClient;

  constructor( http: HttpClient) {
    this.http = http;
  }

您还需要将HttpClientModule导入您的app.module.ts！

Angular 2如何发送邮件PHP？

2 个答案: