Переменная принимает значение init каждый раз

Question

У меня есть меню с 3 элементами, когда я щелкаю элемент, значения классов меняются, чтобы получить активный элемент;но проблема в том, что через секунду страница обновилась автоматически, и классы получили значение по умолчанию, и, конечно, я получил неправильный элемент Active.

HTML:

<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> 

TS:

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";
    }
  }

}

Answer 1

Здесь вам придется использовать routerLink вместо href.Удалите href из кода и добавьте к нему routerLink.Angular динамически генерирует свой href.