我正在开发一个支持两个不同子应用程序的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 (父端用户路由)?计划是为每个路由器配备更多的解析器 . 我宁愿不必在每个解析器服务中处理错误重定向 .