簡體   English   中英

使用ion-nav-back按鈕的離子導航問題

[英]Ionic navigation issue using the ion-nav-back-button

我有一個基於選項卡模板的Ionic應用程序。 我的應用程序的常規導航結構為:

-- users (/users)
    -- user (/users/[id])
-- todos (/todos)
    -- todo (/users/[id])
-- settings (/settings)

那里有一些嵌套視圖(用戶和待辦事項)。 它們顯示在同一導航視圖中,如下所示:

<ion-tabs class="tabs-icon-only tabs-color-assertive">
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/users">
    <ion-nav-view name="users-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/todos">
    <ion-nav-view name="todos-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/settings">
    <ion-nav-view name="settings-tab"></ion-nav-view>
  </ion-tab>     
</ion-tabs>

從而定義了狀態:

  .state('tabs', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('users', {
    url: '/users',
    views: {
      'users-tab': {
        templateUrl: 'templates/tab-users.html',
        controller: 'UsersCtrl'
      }
    }
  })
  .state('tabs.user', {
    url: '/users/:userId',
    views: {
      'users-tab': {
        templateUrl: 'templates/user-detail.html',
        controller: 'UserCtrl'
      }
    }
  })
  .state('todos', {
    url: '/todos',
    views: {
      'todos-tab': {
        templateUrl: 'templates/tab-todos.html',
        controller: 'TodosCtrl'
      }
    }
  })
  .state('tabs.todo', {
    url: '/todos/:todoId',
    views: {
      'todos-tab': {
        templateUrl: 'templates/todo-detail.html',
        controller: 'TodoCtrl'
      }
    }
  })
  .state('tab.settings', {
    url: '/settings',
    views: {
      'settings-tab': {
        templateUrl: 'templates/tab-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  })

在我的index.html文件中,我具有以下內容:

<ion-nav-bar class="bar-light">
  <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

我利用ion-nav-back按鈕來處理用戶和待辦事項的詳細信息。 這將完全自動運行,並且Ionic可以很好地處理此問題。 除了一種情況。 當我從另一個視圖(例如users / 1)中引用待辦事項的詳細視圖(例如/ todos / 3)時,后退按鈕不會出現,也無法返回待辦事項概述(/ todos )。 單擊選項卡按鈕無效,但轉到/ todos / 3)。

我想這是預期的行為,但是有什么辦法無論如何始終顯示后退按鈕,或者始終使選項卡按鈕轉到todos視圖(/ todos)?

我找到了解決方案。 這不是理想的方法,但是可以。 而不是直接進入詳細信息狀態:

$state.go('tabs.todos', {
    id: 1
});

我首先進入主狀態,並保證會進入詳細狀態:

$state.go('tabs.todos').then(function() {
    setTimeout(function() {
        $state.go('tabs.todos', {
            id: 1
        });
    }, 100);
});

超時不是嚴格必要的,但是我發現有時沒有它就失敗。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM