我正在开发一个支持两个不同子应用程序的Angular(5.0.0)应用程序 . 一个是管理区域,另一个是最终用户区域 . 每个都有自己的默认路由 . 最终用户不应该看到任何管理页面 . 管理默认路由为 /
,最终用户默认路由为 /:slug
. 最终用户模块是一个延迟加载的模块,具有自己的路由层次结构 .
APP-routing.module.ts:
export const routes: Routes = [
{
path: '',
component: AdminParentComponent,
canActivate: [AuthService],
children: [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
// Other routes
{
path: 'login',
component: AdminLoginComponent
}
}
{
path: ':slug',
loadChildren: 'app/features/end-user/end-user.module#EndUserModule'
}
]
在end-user-routing.module.ts中:
const endUserRoutes: Routes = [
{
path: '',
component: EndUserParentComponent,
resolve: {
settings: EndUserResolver
},
children: [
{
path: 'login',
component: EndUserLoginComponent,
resolve: {
pageInfo: EndUserPageResolver
}
}
// Other routes
]
}
];
一旦 :slug
的父组件加载,在浏览应用程序时一切都很好 . 该组件正在订阅路由器事件并正确地重定向任何解析失败 .
class EndUserParentComponent implements OnInit {
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationError)
.subscribe(() => {
this.router.navigate([`/${this.route.snapshot.params.slug}`]);
});
}
}
和模板:
<div class="ac-app ac-app--end-user">
<end-user-header></end-user-header>
<div class="ac-app__content">
<router-outlet></router-outlet>
</div>
<end-user-footer></end-user-footer>
</div>
问题是,当加载应用程序并发生解决方案失败时,它会清除网址并加载空白页面 . 最终用户父组件不会捕获NavigationError事件,因为它不会发生从未发生过的第一条路径 . 如果刷新页面,则会加载管理员登录页面,因为它已设置为 /
.
有没有办法声明最终用户路由的所有解析失败都应该重定向回 :slug
(父端用户路由)?计划是为每个路由器配备更多的解析器 . 我宁愿不必在每个解析器服务中处理错误重定向 .