Question

在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，但没有找到任何适用的事件，因为在浏览“离子”选项卡时页面以相同状态保存。

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>

如何从活动选项卡页面检测选项卡更改

2 个答案: