路由器链路中的链路不会更改

Question

我正在创建一个带有链接的侧边栏。我有 3 个组件，侧边栏组件链接 2 个工具栏组件，这样我每次隐藏侧边栏时都可以使用菜单按钮。

这是我的侧边栏组件。

<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'side' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar>Cust_Corp</mat-toolbar>
<div class="dashboard">
<div class="container">
<p><a routerLink="/cust-toolnav">Home</a></p>
<p><a routerLink="/cust-regform">Create a customer</a></p>
<p><a href="#">Display a customer</a></p> 
</div>
<router-outlet></router-outlet>
</div>
</mat-sidenav>
<mat-sidenav-content>
<app-cust-toolnav [title]="title" [burgerMenu]="isHandset$ | async" (burgerClick)="drawer.toggle()"></app-cust-toolnav>
</mat-sidenav-content>
<mat-sidenav-content>
<app-cust-regform [title]="title" [burgerMenu]="isHandset$ | async" (burgerClick)="drawer.toggle()"></app-cust-regform>
</mat-sidenav-content>  
</mat-sidenav-container>

我有一个用于我的第二个工具栏。每次我单击链接时，url都会更改，但工具栏正文不会更改。

<p><a routerLink="/cust-toolnav">Home</a></p>
<p><a routerLink="/cust-regform">Create a customer</a></p>

我有检查应用程序路由模块包括

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustToolnavComponent } from './cust-toolnav/cust-toolnav.component';
import { CustRegformComponent } from './cust-regform/cust-regform.component';

const routes: Routes = [
{ path: '', redirectTo: 'cust-toolnav', pathMatch: 'full' }, <-- I tried removing / and adding /.
{ path: 'cust-toolnav', component: CustToolnavComponent },
{ path: 'cust-regform', component: CustRegformComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

那是因为你错误地实现了侧导航。 它应该只有 1 个<mat-sidenav-content>，并将路由器插座放在<mat-sidenav-content>内