2

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

我的主要 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...
            }
    }

服务组件.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 hit。
我面临的问题是在完成服务调用之前执行的服务调用之后存在一些代码，并且数据显示未定义，因为没有为数组分配值。
在 jquery 中，我们有操作员$.When()，里面的所有服务都将执行，然后继续执行其他代码。是否有任何操作员在角度 4
完成所有服务调用后更好，代码应该执行。需要帮助
在此先感谢

4

2 回答 2

3

使用 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
     });
}
于 2017-09-30T06:56:41.360 回答
1

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

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

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

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);
            });
    }
}
于 2017-09-30T06:43:26.233 回答