How to return two different Observable from resolve function and subscribe it into component

Question

I am trying to return two Observable of different types from on resolve function in route.ts and want to subscribe that Observable in Component.ts but its shows undefined response. I also tried this link 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())]);
    }
}

Now, I am trying to get the data from activatedRoute in component.ts

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);

        });
    }

Both the objects this.view360_2, this.view360 are showing undefined data. kindly help to resolve this, Thanks.

Add code samples else no one will be ready to work from the scratch. The quick thing you could refer, you could use `Observable` which could be used for all kind types. — jithil, Apr 08 '19 at 09:56
@jithil I had by mistake submitted the incomplete question, now I have completed it. — Chandan Vishwakarma, Apr 08 '19 at 10:04
@jpavel can you please refer the above code which i have edit it now. — Chandan Vishwakarma, Apr 08 '19 at 10:35

julianobrasil · Answer 1 · 2019-04-08T15:43:01.330

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

How to return two different Observable from resolve function and subscribe it into component

1 Answers1