Angular应用启动时如何默认设置首个菜单项routerLinkActive为激活状态

你可以选择以下两种常用方案实现需求：

方案1：配置根路由重定向（最推荐，符合Angular路由设计逻辑） #

routerLinkActive启动时不生效，本质是应用刚打开时默认访问的根路径/没有匹配到首个菜单项对应的路由，你只需要在路由配置中添加根路径重定向规则即可：

1. 打开你的路由模块文件（通常是app-routing.module.ts），在路由数组顶部添加重定向配置：

const routes: Routes = [
  // 替换下方的redirectTo值为你首个菜单项对应的utilRoute值
  { path: '', redirectTo: '/首页对应的路由路径', pathMatch: 'full' },
  // 保留你原有的其他路由配置
  { path: '首页对应的路由路径', component: 你的首页组件 },
  // ...其他路由
];

配置完成后应用启动会自动跳转到首个菜单项对应的路由，routerLinkActive会自动匹配生效，不需要修改原有菜单模板代码。

方案2：模板添加初始状态判断（不需要修改路由配置） #

如果不希望修改路由重定向逻辑，可以直接在模板中结合索引判断初始状态的高亮：

1. 首先在菜单对应的组件类中注入Router并声明为公共属性：

import { Router } from '@angular/router';

@Component({
  // 你的组件配置
})
export class 你的组件类 {
  constructor(public router: Router) {}
  // 原有逻辑
}

2. 修改菜单模板的高亮判断逻辑，新增初始根路径下首个菜单高亮的判断：

<div class="menu">
  <div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index">
    <a 
      routerLink="{{ itemFooterMenu.utilRoute }}" 
      routerLinkActive 
      #rla="routerLinkActive"
      <!-- 可选：添加精确匹配配置，避免子路由触发父菜单高亮 -->
      [routerLinkActiveOptions]="{exact: true}"
    >
      <button 
        class="mat-raised-button" 
        mat-raised-button 
        [color]="rla.isActive || (indexItem === 0 && router.url === '/') ? 'primary' : ''"
      >
        <div>
          <mat-icon [color]="rla.isActive || (indexItem === 0 && router.url === '/') ? '' : 'primary'">
            {{ itemFooterMenu.matIcon }}
          </mat-icon>
        </div>
      </button>
    </a>
  </div>
</div> 

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