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

我正在使用路由器解析器,以便在加载页面之前获取我的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中的路由中删除了解析器后,问题才能解决

zuoml 回答:注入ngrx存储的定义解析器后,路由器停止工作

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()
        );
    }
}
本文链接:https://www.f2er.com/3159946.html

大家都在问