Angular 变量每次取init的值

我有一个包含3个元素的菜单，当我单击一个元素时，类的值会发生变化，以获得活动元素；但问题是，一秒钟后，页面自动刷新，类获得默认值，当然，我激活了错误的元素

HTML:

---

您必须在此处使用routerLink而不是href。从代码中删除href并向其添加routerLink。Angular动态生成其href。

谢谢Arvind！！这真的很有效，谢谢你的解释，我很乐意帮忙！！请考虑接受这个答案。

<nav class="nav nav-pills nav-fill">
  <a [class]="accueilClassValue" (click)="ChangeActiveMenu(1)" href="accueil">Accueil</a>
  <a [class]="proposeClassValue" (click)="ChangeActiveMenu(2)" href="propose">Proposer Un CoVoiturage</a>
  <a [class]="chercheClassValue" (click)="ChangeActiveMenu(3)" href="search">Chercher Un CoVoiturage</a>
</nav> 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }

  menuIndex = 1;
  accueilClassValue = "nav-item nav-link active";
  proposeClassValue = "nav-item nav-link";
  chercheClassValue = "nav-item nav-link";


  ChangeActiveMenu(index : number){
    this.menuIndex = index;

    if (this.menuIndex==1){
      this.accueilClassValue = "nav-item nav-link active";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==2){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link active";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==3){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link active";
    }
  }

}