变量每次取初始值及菜单点击后页面刷新致激活状态异常咨询

先来说说你遇到的两个问题，其实它们本质上是关联的，核心问题出在<a>标签的href属性上：

问题1：点击菜单后页面自动刷新，激活类恢复默认 #

当你点击带有href属性的<a>标签时，浏览器会默认触发页面跳转/刷新行为，这就导致你的组件重新初始化，所有变量都会回到初始值——这也是你第一个问题（变量每次获取初始值）的原因。

解决方案：阻止默认跳转行为 #

有几种方式可以解决这个问题：

1. 移除href属性（如果不需要跳转）
   如果这些菜单只是用来切换激活状态，不需要跳转到新页面，直接去掉href即可：

   <nav class="nav nav-pills nav-fill">
     <a [class]="accueilClassValue" (click)="ChangeActiveMenu(1)">Accueil</a>
     <a [class]="proposeClassValue" (click)="ChangeActiveMenu(2)">Pro...</a>
     <!-- 第三个菜单元素 -->
   </nav>
   

2. 在点击事件中阻止默认行为
   如果必须保留href（比如需要路由跳转但用前端路由），可以在click事件中传入$event并调用preventDefault()：

   <nav class="nav nav-pills nav-fill">
     <a [class]="accueilClassValue" (click)="ChangeActiveMenu(1, $event)" href="accueil">Accueil</a>
     <a [class]="proposeClassValue" (click)="ChangeActiveMenu(2, $event)" href="propose">Pro...</a>
   </nav>
   

   然后在组件的ChangeActiveMenu方法中添加阻止默认行为的代码：

   ChangeActiveMenu(menuId: number, event?: Event) {
     // 阻止浏览器默认跳转行为
     if (event) {
       event.preventDefault();
     }
     // 你的菜单激活逻辑，比如修改类值
     switch(menuId) {
       case 1:
         this.accueilClassValue = 'active-class';
         this.proposeClassValue = '';
         // 重置第三个菜单的类值
         break;
       case 2:
         this.proposeClassValue = 'active-class';
         this.accueilClassValue = '';
         // 重置第三个菜单的类值
         break;
       // 处理第三个菜单的case
     }
   }
   

3. 使用前端路由的链接指令（如果是Angular项目）
   看你的代码用了[class]这种Angular绑定语法，那你可以用Angular的routerLink替代原生href，这样跳转是前端路由，不会刷新页面：

   <nav class="nav nav-pills nav-fill">
     <a [routerLink]="['/accueil']" [class.active]="isMenuActive(1)" (click)="setActiveMenu(1)">Accueil</a>
     <a [routerLink]="['/propose']" [class.active]="isMenuActive(2)" (click)="setActiveMenu(2)">Pro...</a>
   </nav>
   

   然后在组件中维护一个当前激活的菜单ID变量：

   activeMenuId = 1; // 默认激活第一个菜单
   
   setActiveMenu(id: number) {
     this.activeMenuId = id;
   }
   
   isMenuActive(id: number): boolean {
     return this.activeMenuId === id;
   }
   

   这种方式更符合Angular的最佳实践，同时避免页面刷新。

问题2：变量每次获取初始值 #

这个问题的根源就是页面刷新导致组件重新实例化，所有组件级变量都会回到初始状态。只要解决了页面刷新的问题，变量就能保持修改后的值了。如果需要在页面刷新后依然保留激活状态，还可以考虑把激活的菜单ID存在localStorage里：

// 设置激活菜单时保存到localStorage
setActiveMenu(id: number) {
  this.activeMenuId = id;
  localStorage.setItem('activeMenu', id.toString());
}

// 组件初始化时从localStorage读取
ngOnInit() {
  const savedMenu = localStorage.getItem('activeMenu');
  if (savedMenu) {
    this.activeMenuId = parseInt(savedMenu, 10);
  }
}

这样即使页面意外刷新，也能恢复之前的激活状态。

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