如何从活动标签页检测标签更改答案

【问题标题】：How to detect tab change from the active tab page如何从活动标签页检测标签更改
【发布时间】：2021-02-16 20:21:26
【问题描述】：

在Ionic docs 中搜索如何检测选项卡更改时，我发现ionTabsDidChange 事件直接链接到ion-tabs 组件。

我的目的略有不同，我需要从与标签本身相关的页面/组件监听标签更改，并使用它的一些数据。

例如，如果我有一个名为TabXPage 的组件，我想知道是否有一种方法可以创建一个有助于监听选项卡变化的方法，如下所示：

@Component({
  selector: 'app-tabx',
  templateUrl: './tabx.page.html',
  styleUrls: ['./tabx.page.scss'],
})
export class TabXPage implements OnInit {

    //...

    onTabChange() {
        // Execute tab change actions using some data that EXISTS IN TabXPage
    }

}

我查看了Angular lifecycle hooks，但我没有找到任何适用的事件，因为在浏览 Ionic 选项卡时页面保持在相同的状态。

【问题讨论】：

你试过ionTabsWillChange吗？这似乎适用于您的情况。
ionTabsDidChange 和 ionTabsWillChange 都适用于 ion-tabs。我正在寻找一种从页面本身收听选项卡更改的方法

标签： angular ionic-framework ionic4

【解决方案1】：

我找到了一个使用 Ionic lifecycle hooks 的解决方案，我不确定它是否是关于该主题的最佳解决方案，但它适用于我的情况。

我只使用了ionViewDidLeave 页面事件：

@Component({
  selector: 'app-tabx',
  templateUrl: './tabx.page.html',
  styleUrls: ['./tabx.page.scss'],
})
export class TabXPage implements OnInit {
    //...

    ionViewDidLeave() {
        console.log("TabX is exited")
    }
}

【讨论】：

【解决方案2】：

在 ionic 3 中我通过使用 ionSelect() 和 ionChange() 方法实现。

<ion-tabs>
  <ion-tab [root]="tab1Root" (ionSelect)="myMethod()"></ion-tab>
  <ion-tab [root]="tab2Root" (ionChange)="myMethod()"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

【讨论】：