您的方向是正确的，但仍有一些遗漏之处。在您正在阅读的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();
  }

}

瞧，应该就是这样了：-）

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

最后，在html中，你可以使用一段非常有效的Javascript来决定显示哪个图标，也许你和我一样，在填充和轮廓版本之间切换。

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

感谢每一个回答这个问题并帮助我弄清楚的人！

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

标签页.html

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

选项卡.ts

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

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

有什么想法吗？

离子将添加“选项卡选定”类到选定的选项卡。您可以使用该类来样式化选项卡图标。

这篇文章是旧的，回答，但我要扩大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;
}