httpClient Angular到PHP数据发送问题

Question

我有一个小项目，我正在尝试做一些用户可以将一些数据输入到文本框中，然后将其发送到 php 服务器，我以前没有使用 angular，但我现在使用它尝试将 angular 和 php 结合使用。

我的问题是，一旦我点击“提交”，发送到 .txt 文件的数据要么使用 $_POST 打印“数组”，要么使用 $_HTTP_RAW_POST_DATA 不打印任何内容。

app.component.ts：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 data: string;
 userInput: any;
 @ViewChild('toSend') input: ElementRef;

 constructor(private http: HttpClient) {
 }
  toSend = JSON.stringify(this.input);
  ngOnInit(): void {

  }

  postData() {
  const newInput = {
    text: this.input.nativeElement.value
   };
  console.log(this.input.nativeElement.value);
  this.http.post('http://localhost:81/test.php', this.toSend)
  .subscribe(
    res => {
      console.log(res);
     }
    );
  }

   requestData() {
   this.http.get('http://localhost:81/test.php').subscribe(
      data => {
        const myJSON = JSON.stringify(data);
        console.log(myJSON);
      }
     );
   }
}

php:

<?php

echo $_POST;

$myfile = fopen("TestingOut.txt", "a++") or die("Unable to open file!");
$txt = $HTTP_RAW_POST_DATA."\r\n";
fwrite($myfile, $txt);
fclose($myfile);
?>

app.component.html：

 <div style="text-align: center; padding-top: 10px">
 <input    type="text"
        id="inputText"
        placeholder="Insert Input"
        #toSend
        >
    <p></p>
  <button type='submit' (click)='postData()' >Submit Data</button>
  <br>
  <hr>
  <button (click)='requestData()'>Request Data</button>
</div>

Answer 1

如果您正在使用@viewChild 访问 DOM 元素，则需要等待 AfterViewInit 生命周期挂钩才能访问该变量，因为这是子组件、DOM 元素和指令可用的时候。 但在您的情况下不需要，因为您使用的是模板引用变量，您可以使用toSend.value将输入控件的值作为参数传递给发布数据方法@

   <div style="text-align: center; padding-top: 10px">
     <input    type="text"
            id="inputText"
            placeholder="Insert Input"
            #toSend
            >
        <p></p>
      <button type='submit' (click)='postData(toSend.value)' >Submit Data</button>
      <br>
      <hr>
      <button (click)='requestData()'>Request Data</button>
    </div>

组件：

import { Component, OnInit, ViewChild, ElementRef,AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit,AfterViewInit{
 data: string;
 userInput: any;
 toSend:any
 @ViewChild('toSend') input: ElementRef;

 constructor(private http: HttpClient) {
 }

  ngOnInit(): void {

  }
  ngAfterViewInit() {
       this.toSend=this.input
 }
  postData(value) {

  this.http.post('http://localhost:81/test.php', value)
  .subscribe(
    res => {
      console.log(res);
     }
    );
  }

   requestData() {
   this.http.get('http://localhost:81/test.php').subscribe(
      data => {
        const myJSON = JSON.stringify(data);
        console.log(myJSON);
      }
     );
   }
}

或者如果你想使用@viewChild，你需要使用observable。

  import {Observable,fromEvent} from 'rxjs'; 
    import {pluck} from 'rxjs/operators
    export class Appcomponent implements OnInit,AfterViewInit{
    @ViewChild('toSend') input: ElementRef;
    Input$:Observable<any>;
     toSend:any
    ngAfterViewInit() {
           this.Input$=fromEvent(this.input.nativeElement,'input');
           this.Input$.pipe(pluck('target','value')).subscribe(value=>{
            this.toSend=value;
            console.log(this.data)});
         }

    postData() {

      console.log(this.input.nativeElement.value);
      this.http.post('http://localhost:81/test.php', this.toSend)
    }

fromEvent：将事件转换为可观察序列
pluck：选择要发出的属性。