选择时如何更改图标

Question

一个简单的问题，但我不知道是否可能。单击时可以更改图标吗？在这种情况下，我的图标是灰色的，我希望它在单击时变为蓝色，但在我的代码中很难做到这一点，所以我想知道我是否可以在单击时更改为另一个图标，我会然后把另一个图标用蓝色。虽然还在学习ionic，那么有很多疑惑。感谢任何可以帮助我的人！

 <div no-padding>
<ion-segment [(ngModel)]="Menu" class="SwipedTabs-tabs">

  <ion-segment-button (click)="selectTab(0)">
    <ion-icon name="icon-ico_gastronomia_off"></ion-icon>
  </ion-segment-button>

Answer 1

您应该能够绑定 attr 名称并通过 Angular [] 更改它 - 这代表一种方式数据绑定；

html

<ion-icon [name]="toShowIcon"></ion-icon>

ts

toShowIcon = 'icon-ico_gastronomia_off';

然后点击更改它；

如果您只想更改一次图标并坚持使用它icona> iconb 使用此代码;

selectTab() {
  this.toShowIcon = 'your_new_icon_name';
}

如果您想单击以切换图标。 icona > iconb 然后从iconb > icona 使用这个；

selectTab() {
  if (this.toShowIcon === 'icon-ico_gastronomia_off') {
    this.toShowIcon = 'your_new_icon_name';
  } else {
    this.toShowIcon = 'icon-ico_gastronomia_off';
  }
}

注意：您也可以为多个图标执行此操作。您只需要添加逻辑即可。

Answer 2

selectTab(index) {    
this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(100*index)+'%,0,0)';
this.SwipedTabsSlider.slideTo(index, 500);
// *** changes made only onces;
this.toShowIcon = 'icon-ico_estadia_off';

// *** toggle change
if (this.toShowIcon === 'icon-ico_gastronomia_off') {
    this.toShowIcon = 'icon-ico_estadia_off';
} else {
    this.toShowIcon = 'icon-ico_gastronomia_off';
}

}

HTML<ion-icon [name]="toShowIcon"></ion-icon>

ts

@ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides;

SwipedTabsIndicator: any = null;
tabs: any = [];
toShowIcon = 'icon-ico_gastronomia_off';

enter code here