Question

我正在尝试使用登录页面实现应用程序，然后当用户登录时，会有一个导航栏，工具栏和sidenav，其中包含registration.unregister().then(async () => { // optionally, get controlled pages to refresh: for (const client of await clients.matchAll()) { client.navigate(client.url); } });。

基本上，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 }, ];。

问题在于，当他进行身份验证时，sidenav组件占用整个空间，然后无法看到其他组件。

基本上这就是问题所在：

/login

我考虑过使用辅助路由，但是路由不是用户友好的。相反，我想让它们保持简单：

<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>

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

以下是：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文件中，您将拥有以下布局。

<强> layout.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。

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

1 个答案: