使用Angular2中的服务在两个组件之间共享数组的最佳方式？答案

【问题标题】：Best way to share an array between two components using a service in Angular2?使用Angular2中的服务在两个组件之间共享数组的最佳方式？
【发布时间】：2017-03-10 19:16:09
【问题描述】：

我正在开发一个应用程序，其中有一个组件 (RecordSelectorComponent)，用户可以在其中从网格中选择多个记录。 RecordSelectorComponent 嵌套在 SharedAttributesComponents 中，SharedAttributesComponents 嵌套在 WizardComponent 中，而后者又嵌套在 ModalComponent 中。所以层次结构看起来像这样：

RecordSelector -(嵌套)-> SharedAttributes -> Wizard -> Modal -> App

我希望 RecordSelectorComponent 能够与顶级应用程序共享其选定记录的列表，以便在任何给定时刻，应用程序都可以请求当前选定的所有记录的列表。据我了解，最好的方法是创建一个 RecordSelectorService。

我的第一个想法是，最好的方法是简单地使用 observable，如下所示：

import { Injectable } from '@angular/core';
import { Record } from './record.interface';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RecordSelectorService {

  private selectedRecords : Array<Record>;

  private setSelected(selected : Array<Record>): void {
    this.selectedRecords = selected;
  }

  public getSelectedObservable() : Observable<Array<Record>> {
    return Observable.from(this.selectedRecords);
  }
}

然而我从那以后学到的是，当你从一个数组创建一个 observable 时，它不是数组的 observable，它是一个在数组中发出值的 observable。我希望的是一个 observable，它会发出当前选定记录的数组。

因此，我开始研究完成我所追求的最佳方法，但事情变得令人困惑。我看到了一些 Stack Overflow 的答案，建议最好的方法是使用 Subject 或 BehaviorSubject。我看到另一个建议我使用 KnockoutJS 库的 observableArray。但在所有问题中，我都没有看到像我这样简单的用例：我只希望一个组件通过服务访问另一个组件的数组，并随着该数组的变化而更新。

那么，对我来说，最简单、最简单的方式是使用服务来传达数组及其在组件之间的变化？

非常感谢您。

【问题讨论】：

Angular2 - How to share data/change between components的可能重复

标签： angular typescript service rxjs observable

【解决方案1】：

最好的方法取决于你的架构，但为了给你一个想法，看看这个例子：

@Injectable()
export class MyService {
    public invokeEvent:Subject<any> = new Subject();
    constructor() {}
}

Component1：将某些内容推送到数组

setInterval(()=>{
    array.push(this.counter++);
    this._myService.invokeEvent.next(array);
},1000);

Component2：监听数组

this._myService.invokeEvent.subscribe((value) => {
     console.log(value); 
     this.anotherName = value;
});

Plunker 示例：http://plnkr.co/edit/EVC7UaO7h5J57USDnj8A

【讨论】：