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文件中，但如果要选择初始的“链接”，则可以使用该变量。

因此将您的代码修改为：

<div [ngClass]="{'selected': selectedLink === 'link1'}" (click)="goToHome(); selectedLink = 'link1'">
  <mat-icon class="icon-container"> home</mat-icon>
</div>
<div [ngClass]="{'selected': selectedLink === 'link2'}" (click)="goToProfile(); selectedLink = 'link2'">
  <mat-icon class="icon-container" svgIcon="user"></mat-icon>
</div>
<div [ngClass]="{'selected': selectedLink === 'link3'}" (click)="goToMessages(); selectedLink = 'link3'">
  <mat-icon class="icon-container">message</mat-icon>
</div>
<div [ngClass]="{'selected': selectedLink === 'link4'}" (click)="goToMore(); selectedLink = 'link4'">
  <mat-icon class="icon-container">more_horiz</mat-icon>
</div>

也许可以使用一些更好的名称；）

这是一个演示： StackBlitz

如何跟踪当前选择了哪个图标，而不是一次选择多个图标

1 个答案: