Angular侧边滑块点击routerLink后车辆文本弹窗不显示求助

问题原因 #

1. 缺少路由跳转指令：你的<mat-list-item>仅设置了routerLinkActive但未绑定routerLink，点击后不会触发Angular路由跳转，导致router-outlet无法加载对应组件，也就看不到车辆相关的内容。
2. routerLinkActive未正确关联路由：routerLinkActive需要配合routerLink一起使用，才能根据当前路由状态标记激活样式。

解决方案 #

步骤1：添加routerLink到导航项 #

修改content.component.html中的<mat-list-item>，添加routerLink属性，指向你配置好的车辆页面路由路径（比如/cars）：

<mat-drawer-container>
    <mat-drawer [opened]="opened" mode="side">
        <mat-list>
            <mat-list-item [routerLink]="['/cars']" [routerLinkActive]="['active']">
                <mat-icon color="primary" mat-list-icon> directions_car </mat-icon>
                <a>Cars</a>
            </mat-list-item> 
        </mat-list>
    </mat-drawer>

    <mat-drawer-content>
        <div class="content">
            <router-outlet></router-outlet>
        </div>
    </mat-drawer-content>
</mat-drawer-container>

步骤2：确认路由配置 #

确保你的app-routing.module.ts中已经定义了/cars对应的路由，比如：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CarsComponent } from './cars/cars.component'; // 导入车辆组件

const routes: Routes = [
  // 其他路由...
  { path: 'cars', component: CarsComponent },
];

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

步骤3：可选优化（样式关联） #

如果希望激活样式更精准，可以把routerLinkActive和routerLink都绑定到<a>标签上：

<mat-list-item>
    <mat-icon color="primary" mat-list-icon> directions_car </mat-icon>
    <a [routerLink]="['/cars']" [routerLinkActive]="['active']">Cars</a>
</mat-list-item>

这样点击文本也能触发路由，激活样式也会正确应用到文本上。

验证效果 #

修改完成后，点击侧边栏的Cars选项，Angular会触发路由跳转，router-outlet中会加载对应的CarsComponent，你就能看到车辆相关的内容了。

内容的提问来源于stack exchange，提问作者John Peter