Angular侧边栏链接跳转新页面而非指定容器问题求助

你的问题出在路由配置错误和侧边栏链接路径不匹配两方面，导致点击链接时替换了整个页面而非在mat-sidenav-content的router-outlet中加载组件。以下是具体修复步骤：

1. 修改路由配置，将内容组件设为MainMenu的子路由 #

打开app-routing.module.ts，把MainMenuComponent配置为父路由，将Dashboard、Cash Control、Investments相关组件作为它的子路由。这样Angular会自动将子组件渲染到父组件内的router-outlet中：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { NewUserComponent } from './components/new-user/new-user.component';
import { MainMenuComponent } from './components/main-menu/main-menu.component';
import { InvestmentCreateComponent } from './components/investments/investment-create/investment-create.component';
import { InvestmentListComponent } from './components/investments/investment-list/investment-list.component';
import { CashControlCreateComponent } from './components/cash-control/cash-control-create/cash-control-create.component';
import { CashControlListComponent } from './components/cash-control/cash-control-list/cash-control-list.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', component: LoginComponent },
  { path: 'new-user', component: NewUserComponent },
  { 
    path: 'home', 
    component: MainMenuComponent,
    children: [
      // 进入home时默认加载Dashboard
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'cash-control', component: CashControlListComponent },
      { path: 'cash-control/new', component: CashControlCreateComponent },
      { path: 'investments', component: InvestmentListComponent },
      { path: 'investments/new', component: InvestmentCreateComponent }
    ]
  }
];

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

2. 修正侧边栏链接的路由路径 #

打开custom-sidenav.component.ts，将menuItems中的route改为与子路由匹配的路径：

menuItems = signal<MenuItem[]>([
  {
    icon: 'dashboard',
    label: 'Dashboard',
    route: 'dashboard',
  },
  {
    icon: 'account_balance_wallet',
    label: 'Cash control',
    route: 'cash-control',
  },
  {
    icon: 'trending_up',
    label: 'Investments',
    route: 'investments',
  }
]);

原理说明 #

• 之前的路由配置中，home/dashboard等是独立的顶级路由，跳转时会替换整个页面的组件；改为子路由后，Angular会识别这些路由属于MainMenuComponent的子内容，从而渲染到该组件内的router-outlet中。
• 侧边栏的routerLink使用子路由名称，确保在home路由上下文内导航，不会跳转到新的顶级页面。

内容的提问来源于stack exchange，提问作者Alan Ensina