使用Angular2中的服务在两个组件之间共享阵列的最佳方法？

Question

我正在开发一个应用程序,其中有一个组件(RecordSelectorComponent),用户可以从网格中选择多个记录.RecordSelectorComponent嵌套在SharedAttributesComponents中,它嵌套在WizardComponent中,并嵌套在ModalComponent中.层次结构如下所示:

RecordSelector - (嵌套) - > SharedAttributes - >向导 - >模态 - >应用程序

我希望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.我希望的是一个可以发出当前所选记录数组的可观察对象.

所以我开始研究完成我所追求的最佳方法,事情变得令人困惑.我看到一些Stack Overflow答案表明最好的方法是使用Subject或BehaviorSubject.我看到另一个建议我使用KnockoutJS库的observableArray.但是在所有问题中我都没有看到一个像我一样简单的用例:我只想让一个组件通过服务访问另一个组件的数组,并在该数组更改时进行更新.

那么,对于我来说,最简单,最简单的方式是使用服务来传递数组和组件之间的变化是什么？

非常感谢你提前.

Answer 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