如何获取从一个角度组件到另一个角度组件的异步数据

Question

我正在尝试在Angular 2中构建一个组件，该组件从父组件中获取数据对象数组和文件名，使用数据创建csv文件，并使用提供的文件名在浏览器中为用户下载该文件。基本上，是一个可重用的ExportCSV组件。我在寻找合适的方法来使用Observable来完成这一点时遇到了问题。父组件需要从Rest API检索数据，子组件才能对其进行操作。父组件有一个单独的关联服务来检索数据。此数据在服务器上分页，导出应包含整个结果集，而不仅仅是客户端上的当前页面。这迫使在单击导出按钮时需要获取整个结果集。如果任何人有这方面的经验，请提供我应该如何完成这一点的方向。提前感谢！

以下是相关代码的一些片段：

export class InvoiceListComponent {
invoiceFullList: Observable<Array<Invoice>>;
...
setExportable(event: any) {

    let params = new InvoiceSearchFilter();

    this._invoiceService.getAllInvoices(params)
      .subscribe(
      (response: any) => {
        this.invoiceFullList = response.json().data;
      },
      () => { });
   }
}
<csv-export [dataList]="invoiceFullList | async" [fileName]='exportFileName'     (exportClickEvent)="setExportable($event)"></csv-export>

export class CsvExportComponent {
@Input() dataList: Array<any>;
@Input() fileName: string = 'data-export';
@Output() exportClickEvent: EventEmitter<{}> = new EventEmitter();
...
exportIt() {
    this.exportClickEvent.emit();
    if (!this.dataList || this.dataList.length < 1) {
        return false;
    }
    this.buttonEnabled = 'disabled';
    this.convertToCSV(this.dataList);
}
...
}
<button name="export-button" type="button" class="btn btn-primary btn-export" [disabled]='buttonEnabled' (click)="exportIt()">CSV Export</button>

Answer 1

几种方法之一是使用|async管道。

父组件的模板

<child [someInput]="someObservable | async"></child>

Answer 2

一种快速的解决方案是使用ngIf，除非invoiceFullList中有数据，否则它不会渲染子组件

<csv-export *ngIf="invoiceFullList" [dataList]="invoiceFullList" [fileName]='exportFileName' (exportClickEvent)="setExportable($event)"></csv-export>

在这种情况下，async管道是不可行的，因为invoiceFullList不是可观察的。当您不是手动订阅时，将使用异步管道，因此异步管道会为您执行此操作，但您正在订阅请求并填充数组，而异步管道不能用于该数组。

Answer 3

我为其他可能感兴趣的人找到了一个解决方案。我在组件和ngOnChanges函数中实现了OnChanges生命周期挂钩，以查找绑定数据的更改，如下所示：

ngOnChanges(changes: SimpleChanges) {
   if  (changes['dataList'] && this.dataList && this.dataList.length > 0) {
       this.convertToCSV(this.dataList);
   }
}