如何使用带有路由器插座的 sidenav 和带有路由器插座的单独登录？

Question

我正在尝试实现一个带有登录页面的应用程序，然后当用户登录时，会有一个导航栏、工具栏和 sidenav 带有router-outlet.

基本上，在app.component.html我有一个定义：

<div *ngIf="isAuthenticated">
    <app-custom-navbar></app-custom-navbar>
    <app-custom-toolbar></app-custom-toolbar>
    <app-custom-sidenav></app-custom-sidenav>
</div>

<router-outlet></router-outlet>

我有这个路由：

const routes: Routes = [
    { path: '', canActivate: [AuthenticationGuard], component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', canActivate: [AuthenticationGuard], component: DataComponent },
    { path: 'projects', canActivate: [AuthenticationGuard], component: ProjectsComponent },
];

因此，这很有效，如果用户未通过身份验证，他将被重定向到/login.

问题是，当他通过身份验证时，sidenav 组件占据了整个空间，然后其他组件就看不到了。

基本上这是问题：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav>

    <!-- sidenav template... -->

  </mat-sidenav>
  <mat-sidenav-content>

   <!-- how can I put my content here and use routing at the same time ? -->
   <!-- <router-outlet></router-outlet> -->

  </mat-sidenav-content>
</mat-sidenav-container>

我想过使用辅助路由，但是这些路由对用户不友好。相反，我想让它们保持简单，例如：

http://mywebsite.com/data
http://mywebsite.com/login
http://mywebsite.com/projects

编辑：现在问题解决了：基本上，我必须正确设置路由。我需要添加主路由 - 例如登录、注销和默认路由。然后我将我的组件添加为默认路由下的子项，在我的情况下是一个空的 '' 路径。这样我的路线看起来很干净，它看起来像我想要的那样。我正在编辑我的帖子，并附有一个工作示例的链接。

这是到的网址：stackblitz

Answer 1

您将需要两个带有 Routes 的文件。第一个文件将包含没有导航栏/侧边栏的页面。

app.routes.ts

import { Routes } from '@angular/router';

export const ROUTES: Routes = [
      {
        path: '', redirectTo: 'login', pathMatch: 'full'
      },
      {
        path: 'myApp', canActivate: [IsAuthorized], loadChildren: './layout/layout.module#LayoutModule'//<- Other routes here
      },
      {
        path: 'login', loadChildren: './login/login.module#LoginModule'
      },
      {
        path: 'error', component: ErrorComponent
      },
      {
        path: '**', component: ErrorComponent
      }
    ];

Next 文件将包含到其他组件或模块的路由。

layout.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';
const routes: Routes = [
      { path: '', component: LayoutComponent, children: [
        { path: 'admin', loadChildren: '../admin/admin.module#AdminModule'},
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: 'home', loadChildren: '../home/home.module#HomeModule' },
        { path: 'about', loadChildren: '../about/about.module#AboutModule' }
      ]}
    ];
    export const ROUTES = RouterModule.forChild(routes);

layout.module.ts

import { ROUTES } from './layout.routes';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  imports: [
    ROUTES
  ],
  declarations: [LayoutComponent, SidebarComponent, NavbarComponent
})
export class LayoutModule {
}

现在在您的 layout.component.html 文件中，您将拥有以下布局。

布局.component.html

<app-custom-navbar></app-custom-navbar>
<app-custom-toolbar></app-custom-toolbar>
<app-custom-sidenav></app-custom-sidenav>
  <router-outlet></router-outlet>

app.module.ts

import { ROUTES } from './app.routes';
...
imports: [
    RouterModule.forRoot(ROUTES, {
      useHash: true,
      preloadingStrategy: PreloadAllModules
    })
  ],
...
export class AppModule { ... }

home.module.ts

export const routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' }
];

NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    RouterModule.forChild(routes),
  ]
})
export class HomeModule {
  public static routes = routes;
}

所以现在你可以看到你的 AppModule 将加载第一个 app.routes.ts 并带你到登录模块。用户登录并通过身份验证后。您可以将它们重定向到“myApp/home”。这将触发 HomeModule（也有路由！）来加载 HomeComponent。