Как вернуть два разных Observable из функции разрешения и подписать их на компонент

Question

Я пытаюсь вернуть два Observable различных типов из функции разрешения в route.ts и хочу подписать это Observable в Component.ts, но он показывает неопределенный ответ. Я также попробовал эту ссылку Angular 4 Как вернуть несколько наблюдаемых в резольвере

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())]);
    }
}

Теперь я пытаюсь получить данные из activRoute в 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);

        });
    }

Оба объекта this.view360_2, this.view360 показывают неопределенные данные. Пожалуйста, помогите решить эту проблему, спасибо.

Answer 1

В вашем резольвере:

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

    return forkJoin(respp, resp);
}

Это должно работать с этим:

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

Я собрал рабочий пример, основанный на тесте, который я проводил с использованием MatTabGroup + Angular анимации: https://stackblitz.com/edit/angular-resolver-sample?file=app%2Ftab-nav-bar-basic-example.ts