获取选定标签以切换Ionic 5图标

Question

我想要在选中时将选项卡图标从填充状态更改为轮廓状态（选中时为填充，未选中时为轮廓）。

在Ionic 5 Tabs Doc上有一个getSelected()方法，但没有关于如何使用它的示例。

我的想法是使用ionTabsDidChange来检测某人点击选项卡的时间，然后使用getSelected()并将图标从“home”设置为“home-outline”。 Tabs.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button class="tab-btn" tab="home">
      <ion-icon name="{{ homeIcon }}"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button class="tab-btn" tab="price">
      <ion-icon name="{{ priceIcon }}"></ion-icon>
      <ion-label>Price Search</ion-label>
    </ion-tab-button>
<ion-tabs>

Tabs.ts

export class TabsPage {
  public homeIcon = 'home';
  private homeFilled = 'home';
  private homeOutline = 'home-outline'
  public priceIcon = 'search-outline';
  private priceFilled = 'search';
  private priceOutline = 'search-outline';

  ionTabsDidChange() {
    let selectedTabName = getSelected();
    // Stuff to switch icon from filled to outline and vice versa
  }

}

问题在于我不知道如何使用 getSelected()，我已经尝试过像 stackoverflow 上的 ViewChild 一样添加，但是 getSelected() 不是一个函数（因为 Ionic 5 中没有 Tabs，所以改为了 IonTabs）。

此时，我唯一能想到的解决方案是保存选项卡状态并为每个选项卡添加点击函数。

- NeedHelp101

Answer 1

你正在朝着正确的方向前进，但仍有一些缺失点。在你阅读的Ionic文档中，“events”无法直接在页面中访问，需要将它们绑定到组件本身，并且为了使用ViewChild，你还需要给组件一个id：

Tabs.html

<ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()">

"tabs" 将是该组件的 id，每当触发 ionTabsDidChange 事件时，它会调用 setCurrentTab 方法，该方法应在您的页面上声明。

然后在页面中，就像您已经提到的那样，您需要添加一个 ViewChild（现在可以使用该 id），并使用 getSelected() 方法。

Tabs.ts

export class TabsPage {
  @ViewChild('tabs', { static: false }) tabs: IonTabs;

...

  setCurrentTab() {
    this.selectedTab = this.tabs.getSelected();
  }

}

完成了，就是这样 :-)

- andriyleu

Answer 2

还有一种非常简单的方法可以实现这个功能。首先，按照@andriyleu的建议在ion-tabs元素中添加ionTabsDidChange属性，但这次确保传递$event详细信息。

<ion-tabs (ionTabsDidChange)="setCurrentTab($event)">

然后您可以在您的ts文件中像这样定义函数。

current_tab = "home"; // Set this as you default page name

setCurrentTab(ev: any){
  this.current_tab = ev.tab;
}

最后，你可以使用一段非常高效的 JavaScript 代码来确定显示哪个图标。也许像我一样，你正在切换填充和轮廓版本。

<ion-icon [name]="current_tab == 'home' ? 'home' : 'home-outline'"></ion-icon>

感谢所有回答并帮助我解决问题的人！

- ajheath

---

对于使用纯 JavaScript 的 Vue.js，(ionTabsDidChange) 会变成 @ionTabsDidChange。 - jaletechs

如果您有默认选项卡 <ion-icon [name]="current_tab == 'tab1' ? 'bed' : 'bed-outline'"></ion-icon> - Disu

Answer 3

在 ion-tabs 标签内部，ionTabsDidChange 传递了一个事件，其中包含所选选项卡。您可以通过以下操作获取该事件，然后应该会给出所点击的选项卡:

tabs.html

<ion-tabs (ionTabsDidChange)="tabClicked($event)">

tabs.ts

tabClicked(e) {
    this.selectedTab = e.tab
}

- Aiden Appleby

Answer 4

在 React 中不起作用。

const log = (e: any): any => {
    console.log(e);
  }

 <IonTabs ionTabsDidChange={log}>

Type '{ children: Element[]; ionTabsDidChange: (e: any) => any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<IonTabs> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
[react-scripts]   Property 'ionTabsDidChange' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<IonTabs> & Readonly<Props> & Readonly<{ children?: ReactNode; }>'.  TS2322
[react-scripts]     47 |     <IonApp>

任何想法？

- Valeriy Donika

---

使用 onIonTabsDidChange。 - junho

在React中，您可以使用onIonTabsDidChange函数，它将事件作为参数，并且该事件具有tab属性。 - Alaa Eddine Cherif

有没有React的解决方案？ - Sid Sss

Answer 5

这篇文章虽然已经有答案了，但我想扩展一下Shrishail的回答，因为我认为这是更好的答案，而且它没有得到足够的关注。当你只想改变外观，比如改变图标时，最好使用CSS。以下是一个基于tab-selected类的工作示例：

<ion-tab-button>
      <ion-icon name="home" class="selected"></ion-icon>
      <ion-icon name="home-outline" class="unselected"></ion-icon>
      <ion-label>Home</ion-label>
</ion-tab-button>

在CSS中：

.tab-selected .unselected {
  display: none;
}

.tab-selected .selected {
  display: initial !important;
}

.selected {
  display: none;
}

- AmirAli Saghaei

Answer 6

对于使用react.js的人来说，这个解决方案对我很有效。

const App: React.FC = () => {
    const [selectedTab, setSelectedTab] = useState<string>();
    
    const handleTabsDidChange = async (event: CustomEvent) => {
      setSelectedTab(event.detail.tab);
    };

    return (
        <IonApp>
          <IonReactRouter>
            <IonTabs onIonTabsDidChange={handleTabsDidChange}>
              <IonRouterOutlet>
                <Route exact path="/status">
                  <Status />
                </Route>
              </IonRouterOutlet>
              <IonTabBar slot="bottom">
                <IonTabButton tab="status" href="/status">
                  <IonIcon icon={selectedTab === 'status' ? disc : discOutline}  />
                  <IonLabel>Status</IonLabel>
                </IonTabButton>
              </IonTabBar>
            </IonTabs>
          </IonReactRouter>
        </IonApp>
  );
};

- abus

Answer 7

Ionic会在选中的标签上添加“tab-selected”类。您可以使用该类来为标签图标设置样式。

- Shrishail Uttagi