Question

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

RecordSelector - （嵌套） - ＆gt; SharedAttributes - ＆gt;向导 - ＆gt;模态 - ＆gt;应用

我希望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。

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

那么，对于我来说，使用服务传递数组之间最简单，最简单的方法是什么呢？

非常感谢你。

Answer 1

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

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

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

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

Component2：侦听数组

def do_request(self, method, url, **kwargs):

    params = kwargs.get('params', None)
    headers = kwargs.get('headers', None)
    payload = kwargs.get('data', None)
    request_method = {'GET':requests.get, 'POST': requests.post, 'PUT': requests.put, 'DELETE': requests.delete}

    request_url = url

    req = request_method[method]

    try:
        res = req(request_url, headers=headers, params=params, data=json.dumps(payload))
    except (requests.exceptions.ConnectionError, requests.exceptions.RequestException) as e:
        data = {'has_error':True, 'error_message':e.message}
        return data
    try:
        data = res.json()


        data.update({'has_error':False, 'error_message':''})
    except ValueError as e:
        msg = "Cannot read response, %s" %(e.message)
        data = {'has_error':True, 'error_message':msg}

    if not res.ok:
        msg = "Response not ok"
        data.update({'has_error':True, 'error_message':msg})
    if res.status_code >= 400:
        msg = 'Error code: ' + str(res.status_code) + '\n' + data['errorCode']
        data.update({'has_error':True, 'error_message': msg})

    return data

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

使用Angular2中的服务在两个组件之间共享数组的最佳方法是什么？

1 个答案: