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

Question

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

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

我的想法是使用ionTabsDidChange来检测某人何时单击了一个选项卡，然后使用getSelected()并将图标从“home”设置为“home-outline”。

标签页.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>

标签文件

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() 不是一个函数（更改为 IonTabs 因为 Tabs 在 Ionic 5 中不存在。

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

Answer 1

您正朝着正确的方向前进，仍然缺少一些要点。在 Ionic 文档中，您正在阅读的“事件”不能在页面中直接访问，而无需将它们绑定到组件本身，为了使用 ViewChild，您还需要为组件提供一个 id：

标签页.html

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

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

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

标签文件

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

...

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

}

瞧，应该是这样:-)

Answer 2

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

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