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

我正在使用路由器解析器，以便在加载页面之前获取我的ngrx存储数据。 在将解析器插入我的路由后，路由器不会生成我的路由中的内容

<router-outlet></router-outlet>

订阅HomeComponent中的路由数据：

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

（请注意，我已尝试删除这一行，以检查问题是否存在，并且问题是否仍然存在）

---

只有当我在app routing.module.ts中将解析程序从我的routes中删除时，问题才得以解决。解析程序会等待可观察的关闭，但状态选择器不会关闭。您需要使用操作符手动关闭

可观察的

，该操作符在第一个值之后关闭流

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

从'@angular/core'导入{Injectable}；
从'@angular/router'导入{Resolve，ActivatedRouteSnapshot，RouterStateSnashot}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map，first}；
从'@ngrx/Store'导入{Store}；
从“../navbar/MenuItem.model”导入{MenuItem}；
从“../store/app.reducer”导入*作为fromApp；
@可注射（）
导出类MenuItemsResolver实现解析{
建造师(
私人商店
) {}
解析（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：
可观察的|承诺|菜单项[]
{
返回此.store.select（'menuItems'）.pipe(
映射（（数据：{menuItems:MenuItem[]}）=>data.menuItems），
第一（）
);
}
}

刚才才明白。无论如何，谢谢你的帮助！解决方案确实正确。您救了我的命。请使用

tap（）

运算符查看激活冲突解决程序时是否发出任何值。还可以使用

take（1）

或

first（）

运算符，该运算符将确保在发出第一个值后立即完成流。

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

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