使用Angular2中的服务在两个组件之间共享数组的最佳方法? [英] Best way to share an array between two components using a service in Angular2?

问题描述

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

I'm developing an app in which there is a component (RecordSelectorComponent) where the user can select multiple records from a grid. The RecordSelectorComponent is nested in SharedAttributesComponents, which is nested in a WizardComponent, and that is nested in a ModalComponent. So the hierarchy looks like this:

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

RecordSelector -(nested in)-> SharedAttributes -> Wizard -> Modal -> App

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

I would like the RecordSelectorComponent to be able to share its list of selected records with the top-level app, so that at any given moment, the app can request a list of all the records currently selected. From what I understand, the best way to do this would be to create a RecordSelectorService.

我的第一个想法是，做到这一点的最佳方法是简单地使用可观察的对象，就像这样:

My first thought was that the best way to do this was to simply use an observable, like so:

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);
  }
}

但是我从中学到的是，当您从数组创建可观察对象时，它不是数组的可观察对象，而是在数组中发出值的可观察对象.我希望的是一个可观察到的东西，它会发出一系列当前选定的记录.

However what I've learned since is that when you create an observable from an array, it's not an observable OF the array, it's an observable that emits values in the array. What I was hoping for was an observable that would emit an array of the currently selected records.

因此，我开始研究完成目标的最佳方法，这使我感到困惑.我看到了一些Stack Overflow答案，这些答案建议最好的方法是使用Subject或BehaviorSubject.我看到另一个建议，我使用KnockoutJS库的observableArray.但是在所有问题中，我都没有看到一个用例像我一样简单:我只希望一个组件通过服务访问另一个组件的数组，并在该数组更改时进行更新.

So I started doing some research on the best way to accomplish what I'm after, and things got confusing. I saw some Stack Overflow answers suggesting the best way to go would be to use a Subject, or a BehaviorSubject. I saw another suggesting I use the KnockoutJS library's observableArray. But in none of the questions did I see a use-case as dead-simple as mine: I just want one component to access the array of another component through a service, and to be updated as that array changes.

那么，对我来说，最简单，最简单的通信数组方法是什么?使用服务在组件之间进行更改是什么?

So, what is the easiest, simplest way for me to communicate the array and it's changes between components using a service?

非常感谢您.

推荐答案

最好的方法取决于您的体系结构，但是为了给您一个想法，请看以下示例:

The best way depends on your architecture but in order to give you an idea, take a look at this example:

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

Component1 :将某些内容推入数组

Component1: pushes something to an array

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

Component2:监听数组

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

柱塞示例: http://plnkr.co/edit/EVC7UaO7h5J57USDnj8A

这篇关于使用Angular2中的服务在两个组件之间共享数组的最佳方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！