Навигация между компонентами с использованием боковой навигации в угловых 7

Question

У меня есть настройка sidenav на домашней странице моего углового приложения.У меня также есть ссылки на другие компоненты в sidenav.Теперь я хочу, чтобы компоненты загружались в одном и том же месте, когда по их ссылкам щелкают, а sidenav и панель инструментов не затрагиваются.

HTML-файл домашней страницы с sidenav и панелью инструментов

<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 успешно поможет в правильной навигации среди дочерних компонентов.