ionic3-活动选项卡从文本更改为图标

Question

这是我的选项卡的屏幕截图，ios和android版本。 我想要最后一个选项卡(tab4Root)当我单击它时，将其更改为icon cart 。

tabs.html

<ion-tabs color="danger">
  <ion-tab [root]="tab1Root" tabTitle="新闻" tabIcon="ios-globe-outline"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="SOS" tabIcon="call"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="服务" tabIcon="people"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="唐人街"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';

import { NewsPage } from '../news/news';
import { SosPage } from '../sos/sos';
import { ServicesPage } from '../services/services';
import { ShopPage } from '../shop/shop';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = NewsPage;
  tab2Root: any = SosPage;
  tab3Root: any = ServicesPage;
  tab4Root: any = ShopPage;

  constructor() {

  }
}

Answer 1

尝试这个 ：

<ion-tabs color="danger">
<ion-tab [root]="tab1Root" tabTitle="新闻" tabIcon="ios-globe-outline"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="SOS" tabIcon="call"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="服务" tabIcon="people"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="唐人街" tabIcon="cart"></ion-tab>
</ion-tabs>