Question

我需要在完成所有服务调用后执行一些代码，因为我需要来自每个服务调用的数据我有我的主ts文件，服务ts文件和api控制器，其中db命中将发生。

我的主要Ts文件代码

    export class demoComponent implements OnInit{
    data1 : any[]
    data2 : any[]
    data3 : any[]

    ngOnInit() {
    this.ServiceComponent.method1(this.id).subscribe((response: Response) => { this.data1 = <any>response, console.log('data', response) });
    this.ServiceComponent.method2(this.id).subscribe((response: Response) => { this.data2 = <any>response, console.log('data', response) });
    this.ServiceComponent.method3(this.id).subscribe((response: Response) => { this.data3 = <any>response, console.log('data', response) });
    .
    .
    some codes to execute...
            }
    }

ServiceComponent.ts文件

public method1 = (id: number): Observable<any> => {return this._http.get(this.method1Url + id).map(response => { return <DataList>response.json() });}
public method2 = (id: number): Observable<any> => {return this._http.get(this.method2Url + id).map(response => { return <DataList>response.json() });}
public method3 = (id: number): Observable<any> => {return this._http.get(this.method3Url + id).map(response => { return <DataList>response.json() });}

从serviceComponent.ts调用api控制器并进行db命中面临的问题是在完成服务调用之前正在执行的服务调用之后存在一些代码，并且数据显示未定义，因为没有为数组分配值。
在jquery中，我们有运算符$.When()，其中所有服务都将执行，然后继续执行其他代码。任何操作员都在角4中完成所有服务调用后，它会更好，代码应该执行。需要帮助
提前致谢

Answer 1

使用RxJS的Observable forkJoin：

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

// ...

ngOnInit() {
    Observable.forkJoin(
        this.ServiceComponent.method1(this.id),
        this.ServiceComponent.method2(this.id),
        this.ServiceComponent.method3(this.id)
    ).subscribe(response => {
        this.data1 = <any>response[0];
        this.data2 = <any>response[1];
        this.data2 = <any>response[2];
        // Here the codes you want to execute after retrieving all data
     });
}

Answer 2

要考虑的另一个选择是定义一组路线解析器。您可以在自己的路由解析器中设置每个方法，然后激活路由直到所有解析器都完成，也就是说已经检索了所有数据。

举个例子，这是我的一个解析器。

注意：它看起来有点复杂，因为它有很多异常处理。但它可能就像你的方法调用一样简单。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Injectable()
export class ProductResolver implements Resolve<IProduct> {

    constructor(private productService: ProductService,
                private router: Router) { }

    resolve(route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): Observable<IProduct> {
        let id = route.params['id'];
        // let id = route.paramMap.get('id');
        if (isNaN(+id)) {
            console.log(`Product id was not a number: ${id}`);
            this.router.navigate(['/products']);
            return Observable.of(null);
        }
        return this.productService.getProduct(+id)
            .map(product => {
                if (product) {
                    return product;
                }
                console.log(`Product was not found: ${id}`);
                this.router.navigate(['/products']);
                return null;
            })
            .catch(error => {
                console.log(`Retrieval error: ${error}`);
                this.router.navigate(['/products']);
                return Observable.of(null);
            });
    }
}

完成所有多次服务调用后执行代码

2 个答案: