html - 获取选定的选项卡以切换图标 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 stackoverflow ，但 getSelected() 不是函数(更改为 IonTabs 因为 Ionic 5 中不存在 Tabs。
此时，我能想到的唯一解决方案是保存选项卡状态并为所有内容添加单击功能。

Answer 1

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

}

瞧，应该是这样:-)