从ionic2中的离子标签推送新页面的问题

问题描述：

我创建了一个示例聊天应用程序，当用户登录应用程序时将导航到标签页

I have created a sample chat application in which when a user login the application will navigate to a tabs page

 <ion-tabs tabsPlacement="top" color="header" tabsHighlight=true>
  <ion-tab [root]="tab1" tabTitle="Chats" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Groups" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Profile" tabIcon="contact"></ion-tab>
</ion-tabs>

当我通过 console.log（this.navCtrl.getActive（）。name）; 检查选项卡中的当前活动页面时code>我收到 undefined 。你能告诉我为什么吗？

when I check the current active page from the tabs by console.log(this.navCtrl.getActive().name); I am getting undefined. Could you please tell me why?

当我通过点击标题 this.navCtrl中的应用程序图标导航到新页面时。推（ 'FriendsPage'）; 。在我打印当前活动页面名称的新页面中，它显示上一页面名称 ChatPage 而不是 FriendsPage

When I navigate to a new page by clicking the app icon from the headerthis.navCtrl.push('FriendsPage');. In the new page when I print the current active page name it shows the previous page name "ChatPage" instead of "FriendsPage"

编辑：添加后退按钮操作

Added backbutton action

      this.platform.registerBackButtonAction(() => {
    let activePortal = this.ionicApp._loadingPortal.getActive() ||
      this.ionicApp._modalPortal.getActive() ||
      this.ionicApp._toastPortal.getActive() ||
      this.ionicApp._overlayPortal.getActive();
    if (activePortal) {
      activePortal.dismiss();
    } else {
      if (this.nav.canGoBack()) {
        this.nav.pop();
      } else {
        if (this.nav.getActive().name === "LoginPage"||this.nav.getActive().name === "SignupPage") {
          this.platform.exitApp();
        }else {
          this.generic.showAlertConfirm("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");
        }
      }
    }
  })

在我的情况下，当用户从选项卡导航到FriendsPage并按下硬件后退按钮时。在正常情况下，视图应该弹出。但是我收到警告信息。

In my case when the user navigate to FriendsPage from tabs and hardware backbutton is pressed. In normal case the view should pop. But I am getting alert message.

this.generic.showAlertConfirm("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");

请帮我解决这个问题。

谢谢和问候

Anand Raj

答

我遇到了像你这样的问题，我仍然没有找到它为什么会发生的答案。但我找到了获得正确页面名称的方法。

在 app.component.ts 中添加以下代码：

I ran into same problem like you and i still do not find out the answer of why it happen. But i found a way to get the correct page name.

In app.component.ts add following code:

import {  App } from 'ionic-angular';
constructor(private app: App){
}
ngAfterViewInit() { 
    this.app.getActiveNav().viewWillEnter.subscribe(event => {
      console.log("current page", event.id);  <== Here is what you need
    })
}

现在，您可以在每个 viewWillEnter 事件中获取页面名称。无需在每个页面中添加代码。

Now you can get page name in every viewWillEnter event. No need to add code in each page.

从ionic2中的离子标签推送新页面的问题

编辑：添加后退按钮操作

Added backbutton action

相关推荐