路由器导出外的 Angular 分量

Question

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

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

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

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

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

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

Answer 1

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

看看这个Sample StackBlitz project .

如果你仔细看看它的路由配置:

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 .