Маршрутизатор перестает работать после определения Resolver с введенным хранилищем ngrx

Question

Я использую распознаватель маршрутизатора для извлечения данных из моего хранилища ngrx перед загрузкой страницы. После вставки распознавателя в мои маршруты маршрутизатор не генерирует содержимое, которое у меня есть в

<router-outlet></router-outlet>

Другие маршруты (без распознавателя) работают хорошо, и если я удаляю преобразователь из маршрута, который загружает страницапросто отлично.

Мой файл распознавателя:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Store } from '@ngrx/store';

import { MenuItem } from '../navbar/menuItem.model';

import * as fromApp from '../store/app.reducer';

@Injectable()
export class MenuItemsResolver implements Resolve<MenuItem[]> {
    constructor(
        private store: Store<fromApp.AppState>
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
        Observable<MenuItem[]> | Promise<MenuItem[]> | MenuItem[]
    {
        return this.store.select('menuItems').pipe(
            map((data: { menuItems: MenuItem[] }) => data.menuItems)
        );
    }
}

Маршруты:

const appRoutes: Routes = [
    { path: '', component: HomeComponent, resolve: {menuItems: MenuItemsResolver} },
    { path: 'portfolio', component: ProjectsComponent },
    { path: 'portfolio/:project', component: ProjectComponent },
    { path: '404', component: PageNotFoundComponent },
    { path: '**', redirectTo: '404' }
];

Подписка на данные маршрутов в HomeComponent:

this.route.data.subscribe((data: Data) => this.menuItems = data['menuItems']);

(Обратите внимание, что я попытался стереть эту строку, чтобы проверить, есть ли проблема здесь, и это все еще происходит)

Проблема решена, только если я удалил преобразователь из моих маршрутов в app-routing.module.ts

Answer 1

Resolver ожидает закрытия Observable, но селекторы состояния не закрываются. Вам необходимо закрыть Observable вручную, используя оператор first , который закрывает поток после первого значения.

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { map, first } from 'rxjs/operators';
import { Store } from '@ngrx/store';

import { MenuItem } from '../navbar/menuItem.model';

import * as fromApp from '../store/app.reducer';

@Injectable()
export class MenuItemsResolver implements Resolve<MenuItem[]> {
    constructor(
        private store: Store<fromApp.AppState>
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
        Observable<MenuItem[]> | Promise<MenuItem[]> | MenuItem[]
    {
        return this.store.select('menuItems').pipe(
            map((data: { menuItems: MenuItem[] }) => data.menuItems),
            first()
        );
    }
}