Question

My ionic 3应用程序有一个带有两个Tabs的离子标签。当从tab切换到tab时，我需要显示一条确认消息（使用AlertController）以防止用户更改当前选项卡，除非他确认了他的选择。这是否可能在离子？我已经尝试在标签更改时显示确认消息。但是，我无法阻止新标签显示。

谢谢。

Answer 1

你可以使用导航守卫来实现这些目标。您可以在NavController的离子文档中找到它们。

实现可能如下所示：

ionViewCanEnter(): Promise<any> {
  return new Promise((resolve, reject) => {
    let alert = this.alertCtrl.create({
      title: 'Alert',
      message: 'Please confirm ...',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            reject();
          },
        },
        {
          text: 'Confirm',
          handler: () => {
            resolve();
          },
        },
      ],
    });
    alert.present();
  });
}

ionViewCanEnter()使用ionViewCanLeave()当前not work（至少在使用标签时）。

Answer 2

ionViewCanEnter只在第一次切换选项卡时触发一次。

您可以对制表符根目录使用双向绑定。

<ion-tabs tabsPlacement="top" #myTabs>
    <ion-tab (ionSelect)="SwitchTab1()" tabIcon="pricetag" [(root)]="tab1" tabsHideOnSubPages="true"></ion-tab>
    <ion-tab (ionSelect)="SwitchTab2()" tabIcon="attach" [(root)]="tab2" tabsHideOnSubPages="true"></ion-tab>
</ion-tabs>

plunker中的示例：https://plnkr.co/edit/FaoZTGZ9VDc8CSq4N9nL?p=preview

  SwitchTab2(){
    if (this.tab2 == null)
      this.Confirm('Are Sure For Switch To Tab 2 ?',() => {
        this.tab2 = Tab2;
        this.tab1 = null;
        setTimeout(() => this.tabRef.select(1));
      })
  }

  Confirm(Message, Action){
    this.alertCtrl.create({
        title: Message,
        buttons: [
          { text: 'Cancel' },
          {
            text: 'Sure',
            handler: Action
          }
        ]
      }).present();
  }

如何在离开Ionic 3中的Tab之前显示确认消息

2 个答案: