在 Angular 4 中等待订阅和承诺

Question

我是 Angular 4 的新手，所以我接受改变我的方法可能会更好。

我拥有的是这样的：

ngOnInit() {
    this.route.paramMap
        .switchMap((params: ParamMap) => {
            var id = +params.get('id');
            return this.service.getOne(id);
        }).subscribe(data => {
            if (data.clientID === 0) {
                data.clientID = +this.route.snapshot.queryParams["parentId"];
            }
            this.model = data;
        },); // Subscription

    this.lookupService.getList("clients").then(data => {
        this.clients = data;
    }); // Promise
}

在客户端，我需要进行另一个服务器调用，但前提是我有来自上述两个调用的数据。换句话说，我需要 Subscription 来完成（好吧，不是完成，而是设置值）和 Promise 来完成。

是否有类似Promise.all 的东西也可以确保this.model 已在Subscription 调用中设置？

编辑： 我可以串联运行它们，但出于性能原因，我想并行运行它们。

编辑 2： Promise 旨在加载查找数据以仅填充一次下拉列表。 Subscription 旨在在每次更改 URL 中的“id”时更改主模型。

Answer 1

1. 在 promise 和模型获取 observable 上使用 .zip()。它将输出一个结果数组，您可以使用这些结果来填充本地类属性。此时您可以调用第三个函数（本地过滤器）。一旦 Promise 完成，.zip 也会完成，所以这条链只有一个输出。

2. 一旦.zip() 完成，监听新的路由参数并获取相应的模型。当它们到达时，设置您的本地类属性并运行您的本地过滤器

3. 订阅触发全链。

   ngOnInit(){
       // Will run getOne() with every new parameter
       let getModelForParam = this.route.paramMap.switchMap(
           params => this.service.getOne(+params.get('id'))
       ).share();
   
       // Zip will wait for both below to produce, then output an array of results
       // and complete (since getList() promise completes after one call)
       Observable.zip(
           this.lookupService.getList('clients'),
           getModelForParam
       ).do(results => { // capture results in order of .zip() arguments
           this.clients = results[0];
           this.model = results[1];
           this.localFilter();// call the filter
       }).concat( // this part executes once .zip() completes
           getModelForParam // continue fetching models for new params
       ).subscribe(model => {
           this.model = model;
           this.localFilter();
       })
   }
   

Live demo

Answer 2

可以使用Observable.forkJoin，相当于Promise.all。

Observable.forkJoin(this.route.paramMap
        .switchMap((params: ParamMap) => {
            var id = +params.get('id');
            return this.service.getOne(id);
        }), Observable.fromPromise(this.lookupService.getList("clients")))
        .subscribe((arrayOfResults) => {
             [firstCallResult, secondCallResult] = arrayOfResults;
             this.model = firstCallResult;
        });

编辑：

为了完成更新参数的部分，我们可以使用Observable.combineLatest操作符：

About Observable.combineLatest

由于它会在源 observable 之一发出时发出，因此订阅块将被执行。由于另一个 observable 来自一个 promise，它将完成并且不会发出更多值，因此不会再次调用 this.lookupService.getList()。

Observable.combineLatest(this.route.paramMap
            .switchMap((params: ParamMap) => {
                var id = +params.get('id');
                return this.service.getOne(id);
            }), Observable.fromPromise(this.lookupService.getList("clients")))
            .subscribe((arrayOfResults) => {
                 [firstCallResult, secondCallResult] = arrayOfResults;
                 this.model = firstCallResult;
                 // do whatever else is needed
            });

Answer 3

你可以这样做

ngOnInit() {
  this.lookupService.getList("clients").then(data => {
    this.clients = data;
    this.route.paramMap
    .switchMap((params: ParamMap) => {
        var id = +params.get('id');
        return this.service.getOne(id);
    }).subscribe(data => {
        if (data.clientID === 0) {
            data.clientID = +this.route.snapshot.queryParams["parentId"];
        }
        this.model = data;
==>Call ur method here!!!
    },); /

}); // Promise