Question

我正在尝试从route.ts中的resolve函数返回两个不同类型的Observable，并希望在Component.ts中订阅该Observable，但其显示未定义的响应。我也尝试了此链接Angular 4 How to return multiple observables in resolver

route.ts

@Injectable({ providedIn: 'root' })
export class View360Resolve implements Resolve<any> {

    constructor(private service: View360Service) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            var view360: View360;
            var view360_2: View360_2;

            var respp = this.service.findView360_2(1).pipe(
                filter((response: HttpResponse<View360_2>) => response.ok),
                map((View360_2: HttpResponse<View360_2>) => View360_2.body)
            );

            var resp = this.service.find(id).pipe(
                filter((response: HttpResponse<View360>) => response.ok),
                map((view360: HttpResponse<View360>) => view360.body)
            );

            return forkJoin([
                respp,
                resp]);

            }
        return forkJoin([
            of(new View360_2()),
            of(new View360())]);
    }
}

现在，我正在尝试从component.ts中的ActivatedRoute获取数据

ngOnInit() {

        this.activatedRoute.data.subscribe(({ result }) => {

            this.view360_2 = result[0];
            this.view360 = result[1];
            console.log("view360_2===" + this.view360_2);
            console.log("view360===" + this.view360);

        });
    }

对象this.view360_2和this.view360都显示未定义的数据。谢谢您的帮助。

Answer 1

In your resolver:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {

    return forkJoin(respp, resp);
}

This should work with this:

this.activatedRoute.data.subscribe((data) => {
    console.log(data);
});

I put together a working example built upon a test I was doing using MatTabGroup + Angular animations: https://stackblitz.com/edit/angular-resolver-sample?file=app%2Ftab-nav-bar-basic-example.ts

如何从resolve函数返回两个不同的Observable并将其订阅到组件中

1 个答案: