获取选定的选项卡以切换图标 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()，我试过 adding ViewChild like this Whosebug，但 getSelected() 不是函数（更改为 IonTabs，因为 Tabs 不存在于离子 5.

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

Answer 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();
  }

}

瞧，应该就是这样了:-)

Answer 2

在 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>

有什么想法吗？

Answer 3

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

Answer 4

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

tabs.html

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

tabs.ts

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

Answer 5

还有另一种非常简单的方法可以做到这一点。首先按照@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>

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

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

Get selected tab to switch icons Ionic 5

html

typescript

ionic-framework

angular

ionic5