Asa*_*hah 6 angular angular-router angular-route-guards angular-resolver
我试图在导航到子级路由之前解析数据,因为我必须在儿童警卫队中使用该数据。问题是父级解析器,在解雇了儿童看守后解析数据。解析器需要很长时间才能解析数据
// app.module.ts
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{
path: '',
component: SiteLayoutComponent,
children: [
{ path: '', redirectTo: 'warehouse', pathMatch: 'full' },
{
path: 'warehouse',
loadChildren: './warehouse/warehouse.module#WarehouseModule'
// loadChildren: () => WarehouseModule
}
],
canActivate: [AuthGuard],
resolve: {
Site: SiteResolver // should be resolved before the guard is invoked.
}
},
{ path: '**', component: PageNotFoundComponent }
];
// warehouse.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: 'cash', pathMatch: 'full' },
{ path: 'cash', component: CashComponent, canActivate: [RouteGuard] // should be invoked after the parent resolver resloves th data }
];
Run Code Online (Sandbox Code Playgroud)
在此,父解析器(即SiteResolver)在子守护程序(即RouteGuard)被调用之后解析。我想要的是SiteResolver首先解析数据,然后RouteGuard应该触发,我该如何实现?
我不确定这是否是正确的方法。但在经历了很多角度问题之后,我找到了解决方法。
使用 canActivate 来获取数据并将数据存储在服务中,而不是 resolve 。下面是相同的代码片段
@Injectable()
export class FetchUserData implements CanActivate {
constructor(
private userService: UserService,
private httpClient: HttpClient
) {}
public modalRef: BsModalRef;
canActivate() {
return this.httpClient
.get("some/api/route")
.map(e => {
if (e) {
this.userService.setUserDetails(e);
return true;
}
return true;
})
.catch(() => {
return Observable.of(false);
});
}
}
Run Code Online (Sandbox Code Playgroud)
这对我来说效果很好。刷新子路由不会有任何问题。
| 归档时间: |
|
| 查看次数: |
1515 次 |
| 最近记录: |