路由器在注入 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']);

（请注意，我已尝试擦除此行以检查问题是否仍然存在）

仅当我从应用程序中的路由中删除解析器时问题才得到解决-routing.module.ts

Answer 1

Resolver 等待 Observable 关闭，但状态选择器不会关闭。您需要使用 first 运算符手动关闭 Observable，这会在第一个值之后关闭流。

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

路由器在注入 ngrx 存储定义解析器后停止工作

Router stop working after define Resolver with ngrx store injected

javascript

angular

typescript

ngrx

angular-resolver