我正在使用路由器解析器,以便在加载页面之前获取我的 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 中的路由中删除解析器时,问题才会解决
最佳答案
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()
);
}
}
关于javascript - 路由器在注入(inject) ngrx 存储定义解析器后停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58710652/