时间戳

首页 > 解决方案 > 路由器出口外的角组件

angular - 路由器出口外的角组件

问题描述

我想使用错误组件显示我的错误消息，但不想<router-outlet></router-outlet>为经过身份验证的用户加载该组件，因此也不应显示导航菜单。

我有这样的应用程序组件..

<div>
<nav><nav>
<router-outlet></router-outlet>
</div>

我有错误处理程序，它使用 router.navigate 路由到错误组件。

但它与导航组件一起加载到路由器插座中。我想将它作为整个页面加载，并且没有导航或任何其他组件。

实现这一目标的最佳方法是什么。

标签： angular

解决方案

您可以使用 Shell-Component 作为需要查看标题的登录用户的入口点。

看看这个示例 StackBlitz 项目。

如果您仔细查看它的路由配置：

const appRoutes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'contactus', component: ContactComponent },
      { path: 'events', component: EventsListComponent },
      { path: 'events/:id', component: EventDetailsComponent },
      { path: 'home', component: HomeComponent },
      { path: 'view', component: ViewPostComponent },
      { path: '', component: PlaceholderComponent }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: 'error', component: ErrorComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

您会看到 login 是一个外部级别的路由，不会显示任何 Header。但是一旦用户登录，用户就会被导航到''加载ShellComponent.

因此，您基本上可以创建另一个路由（'error'），与路由处于同一级别'login'，然后将用户相应地导航到ErrorComponent.

推荐阅读