带有登录和基本 sidenav 的 Angular 材质应用程序

Posted 2023-03-13

【中文标题】带有登录和基本 sidenav 的 Angular 材质应用程序

【英文标题】：Angular material application with login and basic sidenav

【发布时间】：2019-05-28 11:54:37

【问题描述】：

我有一个带有登录组件的应用程序，一个仪表板组件，其中包含一个角度材料基本 mat-sidenav-container 和另外两个组件。在 mat-sidenav 中，我为这两个组件设置了两个 routerLink 项。 我应该如何配置应用程序路由以呈现 mat-sidenav-content 中的组件？ 我的应用路由如下所示：

const routes: Routes = [
  
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthguardService],
    children: [
       path: 'first', component: FirstComponent,
       path: 'second', component: SecondComponent
    ]
  ,
  
    path: 'login',
    component: LoginComponent
  ,
  
    path: '',
    component: LoginComponent
  ,
  
    path: '**',
    component: PageNotFoundComponent
  
];

这是我的仪表板组件：

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item routerLink='/first'>First Component</a>
      <a mat-list-item routerLink='/second'>Second Component</a>
      <a mat-list-item (click)="onLogOut()">Log out</a>
    </mat-nav-list>
  </mat-sidenav>

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

【问题讨论】：

我刚刚从仪表板组件模板中的 routerLink 中删除了斜杠“/”，它起作用了

【参考方案1】：

我刚刚从仪表板组件模板中的 routerLink 中删除了斜杠“/”，它起作用了：

<a mat-list-item routerLink='first'>First Component</a>
<a mat-list-item routerLink='second'>Second Component</a>