Question

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

 <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 []进行更改-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

选定后如何更改图标

2 个答案: