如何以角度将 http 响应从组件传递到另一个组件

Question

我无法更新数据

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data1 = new BehaviorSubject<any>(null);
  data = this.data1.asObservable();
  data3:any;
  constructor() { }
  sendData(data: any) {
    this.data1.next(data);
  }
  getData(): Observable<any> {
    return this.data;
  }
}  

app.component.ts

文件：

public postData(name: string) {
  const headers = { "Content-Type": "multipart/form-data" };
  this.http.post("http://localhost:5000/app/", name, { headers: headers })
    .subscribe(
      (response) => {
        console.log(response);
        this.data = response;
        },
      (error) => {
        console.error(error);
      });
}  

parcourir.component.ts

文件：

export class ParcourirComponent implements OnInit{ 
  data1:any;
  constructor(private service:DataService){}
  ngOnInit() {  
    this.service.getData().subscribe(response=>{
      this.data1 = response;
      console.log(this.data1)
    });
}   

它向控制台记录 null，它不更新数据 我希望

app.component.ts

中的 http 请求中的响应被发送到

parcourir.component.ts

.

Answer 1

您可以将

data

变量定义为

BehaviorSubject

然后像下面这样更新它（在

app.component.ts

中）：

this.service.data.next(newValue);

最后在目标组件中，您可以通过这种方式（在

data

中）订阅

parcourir.component.ts

字段的值变化：

this.service.data.asObservable().subscribe((value) => {
  this.localDataField = value;
});