Как отслеживать, какой значок выбран в данный момент вместо нескольких значков одновременно?

Question

Итак, я пытаюсь выбрать только одну иконку, мне нужно переписать свою функцию в файле .ts так, чтобы она гарантировала, что при выборе одной пиктограммы только эта иконка меняет цвет, а остальные по умолчанию.Если выбрать «только дом», значок «Дом» изменит цвет, если я выберу больше, значок «Дом» вернется к значению по умолчанию, а значок «больше» изменится.Прямо сейчас, если я выберу один значок за другим, они все меняют цвет, если я не обновлюсь.Любая помощь, пожалуйста?

.html

<div class="footer-container">
    <div class="nav-icon-container">
        <div [class.selected]="isHomeSelected" (click)="goToHome()">
            <mat-icon class="icon-container"> home</mat-icon>
        </div>
        <div [class.selected]="isProfileSelected" (click)="goToProfile()">
            <mat-icon class="icon-container" svgIcon="user"></mat-icon>
        </div>
        <div [class.selected]="isMessagesSelected" (click)="goToMessages()">
            <mat-icon class="icon-container">message</mat-icon>
        </div>
        <div [class.selected]="ismoreSelected" (click)="goToMore()">
            <mat-icon class="icon-container">more_horiz</mat-icon>
        </div>
    </div>
</div>

.ts

isHomeSelected = false;
goToHome() {
  this.isHomeSelected = true;
  this.router.navigate(['home']);
}

isProfileSelected = false;
goToProfile() {
  this.isProfileSelected = true;
  if(this.currentUser){
    this.router.navigate(['profile/'+this.currentUser.uid]);
  } else {
  this.router.navigate(['signin', {params:'/profile/'+this.currentUser.uid}]);
  } 
}

isMessagesSelected = false;
goToMessages() {
  this.isMessagesSelected = true;
  if(this.currentUser){
    this.router.navigate(['messages']);
  } else {
    this.router.navigate(['signin', {params: '/messages'}]);
  } 
}

ismoreSelected = false;
goToMore() {
  this.ismoreSelected = true;
  return true
}

.css

.selected {
  color: #ff3588;
}

Answer 1

Вы можете создать массив и циклически перебирать «ссылки» и изменять класс selected, в зависимости от которого нажимается (аккуратно), но, поскольку вы используете решение с различными значками (с svgIcon в смеси), может показаться, чтовозможно, проще добавить ngClass и событие click для каждого элемента в вашем списке.Так что это будет выглядеть следующим образом, где мы используем ngClass для переключения класса, и мы используем уникальную строку (в данном случае), которой мы назначаем переменную, которая определяет, какая «ссылка» будет активной.Эта переменная необязательно должна существовать в файле TS, но используйте ее, если вы хотите, чтобы была выбрана начальная «ссылка».

Так что измените свой код на такой:* Возможно, используйте более подходящие имена;)

Вот демонстрация: StackBlitz