Значок вкладки ionic3 Я хочу изменить фоновое изображение при сенсорном начале, сенсорном конце

Question

Я хочу изменить «значок вкладки», когда происходит событие «touchstart» или «touchend».

onTouchStart(e) {
    if (e.target.attributes['aria-label'] && e.target.attributes['aria-label'].value == 'home') {
      e.target.style.backgroundImage = "url(../assets/imgs/homeRoot.png)";
    }
  }

  onTouchEnd(e) {
    if (e.target.attributes['aria-label'] && e.target.attributes['aria-label'].value == 'home') {
      e.target.style.backgroundImage = "url(../assets/imgs/homeRoot_default.png)";
    }
  }

<ion-tabs (touchstart)="onTouchStart($event);" (touchend)="onTouchEnd($event);">
  <ion-tab [root]="tab1Root" tabTitle="One" tabIcon="one"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="Two" tabIcon="Tow"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="Three" tabIcon="Three"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Four" tabIcon="Four"></ion-tab>
</ion-tabs>

Я хочу показать вам, к какой вкладке вы прикасаетесь, когда начинается касание. В «ионных вкладках» нет обработки для сенсорного запуска, поэтому я реализовал ее непосредственно, как указано выше. Но это не работает на Android.

Касание до

Thouch End

'backgroundImage' исчезает и не находится в своем первоначальном состоянии.

Answer 1

export xyz{
tabs = [{root: "tab1Root",menu: "1st menu", icon: "iconname"},{root: "tab2Root", menu: "2nd menu", icon: "iconname},{root: "tab3Root",menu: "3rd menu", icon: "iconname}];
}

<ion-tabs (touchstart)="foo($event);" (touchend)="bar($event);">
<span *ngFor="let tab of tabs"
  <ion-tab [root]="tab.root" tabTitle="tab.menu" tabIcon="tab.icon"></ion-tab>
</ion-tabs>