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

Question

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

我的目的略有不同，我需要从与选项卡本身相关的 page/component 监听选项卡更改，并使用它的一些数据。

例如，如果我有一个名为 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 选项卡中导航时页面保留在相同状态。

Answer 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")
    }
}

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

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

How to detect tab change from the active tab page

ionic-framework

angular

ionic4