Angular2可观察-在继续之前等待多个函数调用

Question

我正试图通过迁移当前使用Angular1/AngularJS编写的应用程序来提高我对Angular2的了解。

有一个特征特别难倒了我。我试图复制一个功能，其中调用函数等待继续，直到它正在调用的函数完成了一个循环的promise。在AngularJS中，我调用的函数基本上是这样的：

this.processStuff = function( inputarray, parentnodeid ) {
    var promises = [];
    var _self = this;
    angular.forEach( inputarray , function( nodeid ) {

        switch ( parentnodeid )
        {
            case ‘AAA’ : var component = _self.doMoreStuff( nodeid, parentnodeid ); break;
            case ‘BBB’ : var component = _self.doMoreStuff( nodeid, parentnodeid ); break;
            case ‘CCC’ : var component = _self.doMoreStuff( nodeid, parentnodeid ); break;
            default    : var component = null;
        }
        promises.push( component );
    });
    return $q.all(promises);
}; 

它包含一个调用另一个函数（doMoreStuff）的forEach循环，该函数还返回一个promise，并将所有返回的promise存储在一个数组中。

使用AngularJS，当我在另一个函数中调用ProcStuff时，我可以指望系统等待，直到ProcStuff完成，然后才能在随后的块中输入代码：

service.processStuff( arraying, parentidarg )
       .then(function( data ) {
              ... 

调用者等待所有调用完成，直到调用者进入它的代码块。

我不确定如何实现这与Angular2和观察。我可以从这些帖子中看到，为了模仿promise，可观察性基本上只是使用订阅（）而不是然后（）：

角度1。x$q到角度2.0测试版

但是，在应用程序可以继续之前，我如何等待foreach循环中的所有调用完成呢？

Answer 1

在RxJS v6和更高版本中，您可以使用zip更有力地实现这一点。

    import { zip } from 'rxjs';

    const promise1 = yourSvc.get(yourFavoriteAPI.endpoint1);
    const promise2 = yourSvc.get(yourFavoriteAPI.endpoint2);

    const promises = zip(promise1, promise2);

    promises.subscribe(([data1, data2]) => {
      console.log(data1);
      console.log(data2);
    });

虽然结果是相同的，但我发现zip比forkJoin更可取，因为zip更通用，可以处理可观察到的新值。

详细信息从rxjs留档：

zip操作符将订阅所有内部观察值，等待每个观察值发出一个值。一旦发生这种情况，将发出具有相应索引的所有值。这将一直持续到至少一个内部可观察对象完成为止。

Answer 2

我一直在用forkJoin做这件事

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

Observable.forkJoin(
  this.http.get('./friends.json').map((res: Response) => res.json()),
  this.http.get('./customer.json').map((res: Response) => res.json())
)
.subscribe(res => this.combined = {friends: res[0].friends, customer: res[1]});

更多信息：http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http