Question

我在我的angular应用程序的主页中设置了sidenav设置。我还设置了指向sidenav中其他组件的链接。现在，我希望在单击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链接中指定路由器链接。确保将它们指向的路由器链接指定为主要组件的子路由。要指定它们，请转到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中使用side-nav在组件之间导航

1 个答案: