Question

我需要帮助。我有1个父组件。里面有五个孩子。这是一页卡片。每张卡都是一个组件。在一张卡片中，我将一个csv文件上传到服务器，服务器立即给我json，我需要在其他卡片中以表格，图表的形式显示json，而无需额外的get-requests。事实上，单击发送按钮，文件已经消失，然后它出现在所有组件中。通过该服务获取和发布请求。我不明白如何通过服务将数据传输到所有组件。先感谢您。

我有简单的http.service.ts

constructor(private http: HttpClient) { }
    getData() {
      return this.http.get('http://localhost:8080');
    }
    postData(data: any) {
      return this.http.post('http://localhost:8080', data, {
        reportProgress: true,
        observe: 'events'
      })
    }
}

和子组件，将文件上传到服务器

export class SignalsComponent {
  selectedFile: File = null;
  addFileStatus = false;
  progressBar: any;
  signalsFiles: any;
  constructor(private http: HttpService) {}
  onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
    this.addFileStatus = true;
  }
  sendCsvFile() {
    const formData = new FormData();
    formData.append('csv-file', this.selectedFile, this.selectedFile.name);
    this.http.postData(formData)
      .subscribe(event => {
        if(event.type === HttpEventType.UploadProgress) {
          this.progressBar = 'Upload Progress: ' + Math.round(event.loaded / event.total * 100) + '%';
        } else if (event.type === HttpEventType.Response) {
          this.signalsFiles = event.body;
          console.log(this.signalsFiles);
        }
      });
  }

Answer 1

您可以在服务中创建一个observable。当您发出HTTP请求时，您可以通过observable发送该响应，以便通知任何订阅者。该服务看起来像这样：

WITH cte(d) AS (
       VALUES ('2016-01-01'::date)
              ,('2017-01-01'::date)
              ,('2018-01-01'::date)
       --Or unnest array_variable WITH ORDINALITY
    )
SELECT *
FROM cte c,
LEFT JOIN LATERAL (SELECT MAX(date) AS max_date_before
                   FROM  date_history d
                   WHERE d.ticker = 'APPL' 
                     AND d.date <= c.d) s;

您的组件可以订阅onDataChanged observable，如下所示：

import { Injectable } from '@angular/core';
import { Subject } from "rxjs/Subject";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class ExampleService {

  private _dataChanged = new Subject<any>();

  // Components can subscribe to this
  public onDataChanged = this._dataChanged.asObservable()

  constructor(private http: HttpClient) {

  }

  public loadData() {
    // Emit the data here
    return this.http.get("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe((data) => this._dataChanged.next(data));
  }

}

只要您的某个组件调用constructor(private service: ExampleService) { this.service.onDataChanged.subscribe((data) => this.data = data); }，系统就会通知所有订阅者。

这是一个stackblitz示例https://stackblitz.com/edit/angular-gueraq?file=app%2Fhello.component.ts

从另一个组件中的一个组件输出数据。 Angular 5

1 个答案: