在 angular 7 中使用侧边导航在组件之间导航

Question

我在 angular 应用程序的主页中设置了 sidenav。我还在 sidenav 中设置了指向其他组件的链接。现在我希望组件在相同的 space 中加载，当它们的链接被点击时 sidenav 和工具栏不受影响。

带有sidenav和工具栏的主页的HTML文件

<mat-toolbar>
    <button (click)='sidenav.toggle()'><mat-icon style="color: white">menu</mat-icon></button>
    <b style="font-size: 22px; color: white">Hello {{user}}</b>
    <nav>
        <ul>
            <li><button (click)='logout()'><div style='font-size: 19px; color: white'> LOGOUT</div></button></li>
        </ul>
    </nav>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav #sidenav mode='side' [(opened)]='opened'>
        <mat-nav-list style="margin-top: 50px">
            <a mat-list-item routerLink="/dashboard" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>dashboard</mat-icon><span>&nbsp;&nbsp;</span>DASHBOARD</button></a>
            <a mat-list-item routerLink="/visual" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>timeline</mat-icon><span>&nbsp;&nbsp;</span>VISUALISATION</button></a>
            <a mat-list-item routerLink="/config" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>settings</mat-icon><span>&nbsp;&nbsp;</span>PROFILE</button></a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
    </mat-sidenav-content>
</mat-sidenav-container>

我想确保当我第一次打开这个页面时，会显示仪表板，但是当我在可视化或配置文件中单击时，仪表板组件应该在同一个地方被另一个单击的组件替换，而不是需要重新加载工具栏和 sidenav 组件。

Answer 1

为了确保sidenav首先充当导航栏，我们需要在标签内指定标签。那么第二步就是在sidenav链接中指定router链接。确保它们指向的路由器链接被指定为主要组件的子路由。要指定它们，请转到 app-routing.module.ts 模块并指定在上述情况下的路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardViewComponent } from './dashboard-view/dashboard-view.component';
import { VisualisationComponent } from './visualisation/visualisation.component';
import { ConfgaccountComponent } from './confgaccount/confgaccount.component';

const routes: Routes = [
  {
    path: 'dashboard', component: DashboardComponent, children: [
      { path: 'dash', component: DashboardViewComponent },
      { path: 'visual', component: VisualisationComponent },
      { path: 'config', component: ConfgaccountComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

现在下一步是在标签内指定标签，以确保无论何时单击 sidenav 中的链接，它们都会被路由到正确的子组件并显示在正确的位置。还要确保标记内的 routerLinks 更新为为子组件指定的正确路由，如 app-routing.module.ts 文件中所示。修改后的 HTML 代码将是：

<mat-toolbar>
    <button (click)='sidenav.toggle()'><mat-icon style="color: white">menu</mat-icon></button>
    <b style="font-size: 22px; color: white">Hello {{user}}</b>
    <nav>
        <ul>
            <li><button (click)='logout()'><div style='font-size: 19px; color: white'> LOGOUT</div></button></li>
        </ul>
    </nav>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav #sidenav mode='side' [(opened)]='opened'>
        <mat-nav-list style="margin-top: 50px">
            <a mat-list-item routerLink="/dashboard/dash" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>dashboard</mat-icon><span>&nbsp;&nbsp;</span>DASHBOARD</button></a>
            <a mat-list-item routerLink="/dashboard/visual" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>timeline</mat-icon><span>&nbsp;&nbsp;</span>VISUALISATION</button></a>
            <a mat-list-item routerLink="/dashboard/config" routerLinkActive="active"><button (click)='sidenav.close()'><mat-icon>settings</mat-icon><span>&nbsp;&nbsp;</span>PROFILE</button></a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <main>
            <router-outlet></router-outlet>
        </main>
    </mat-sidenav-content>
</mat-sidenav-container>

下一步是创建路由器和 sidenav 订阅的导航服务，以确保在单击链接时顺利路由到正确的组件。该服务需要注入到主仪表板组件的构造函数中，以确保其成功运行。 nav.service.ts 文件将包含指定的内容：

import { Injectable, EventEmitter } from '@angular/core';
import { Event, NavigationEnd, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NavService {

  public appDrawer: any;
  public currentUrl = new BehaviorSubject<string>(undefined);

  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        this.currentUrl.next(event.urlAfterRedirects);
      }
    });
  }
}

最后测试主仪表板组件中的子组件是否成功运行。 sidenav 现在将成功地帮助子组件之间的正确导航。

在 angular 7 中使用侧边导航在组件之间导航

Navigating between components using side-nav in angular 7

angular7