获取选定的选项卡以切换图标 Ionic 5

Posted 2023-03-13

【中文标题】获取选定的选项卡以切换图标 Ionic 5

【英文标题】：Get selected tab to switch icons Ionic 5

【发布时间】：2020-11-05 14:44:42

【问题描述】：

当有人选择它时，我正在尝试将我的标签图标从填充更改为轮廓（选中时填充，未选中时轮廓）。

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()，我试过adding ViewChild like this ***，但getSelected() 不是函数（改为IonTabs，因为Ionic 5 中不存在Tabs。

此时，我能想到的唯一解决方案是保存标签状态并为所有内容添加点击功能。

【参考方案1】：

您正朝着正确的方向前进，仍然缺少一些要点。在 Ionic 文档中，您正在阅读的“事件”在页面中无法直接访问，除非将它们绑定到组件本身，并且为了使用 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();
  

瞧，应该就是这样 :-)

【参考方案2】：

在 ion-tabs 标签内，ionTabsDidChange 传递了一个具有选定标签的事件。您可以通过执行以下操作来获取该事件，然后它应该为您提供单击的选项卡：

tabs.html

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

tabs.ts

tabClicked(e) 
    this.selectedTab = e.tab

【参考方案3】：

还有另一种非常简单的方法可以做到这一点。首先按照@andriyleu 的建议将 ionTabsDidChange 属性添加到您的 ion-tabs 元素中，但这次请确保传入 $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;

最后，在您的 html 中，您可以使用一段非常高效的 javascript 来确定要显示哪个图标。也许像我一样，您正在填充版本和轮廓版本之间切换。

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

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

【讨论】：

对于带有原生 javascript 的 vue.js，(ionTabsDidChange) 将是 @ionTabsDidChange

【参考方案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>

有什么想法吗？

【讨论】：

使用onIonTabsDidChange

【参考方案5】：

Ionic 会将“tab-selected”类添加到选定的选项卡。您可以使用该类来设置选项卡图标的样式。