Question

我有一个ion-list项，其中包含以下内容：

儿童Page A
儿童Page B
儿童Page C

在子页面B上，我想导航到上一页（子页面A）和下一页面（子页面C）页面，同时保持后退按钮返回到父页面。

这方面的一个例子是iOS中的Mail应用程序。当您查看邮件时，它会为您提供向上和向下箭头以移至上一个/下一个邮件。

我在描述此行为的文档中找不到任何内容。

请注意，此标记为ionic2

Answer 1

我今天遇到了完全相同的问题并解决了这个问题：

// Push the sibling page onto the stack. 
this.navCtrl.push( PageToPush, { fooParam : 'bar' } ).then( ()=> {
    // There should be 3 pages in the stack now, and we need to remove the 2nd page (index 1)
    this.navCtrl.remove(1);
}

其中this.navCtrl是NavController的实例。这假设您始终从根页面导航并且只想在堆栈中保留一个子页面。这样做是将新页面推送到堆栈（堆栈中的索引2）然后一旦页面被推送，从堆栈中删除索引1页面。

希望有所帮助。

Answer 2

这个儿童导航栏

<ion-nav-bar class="bar-light">
    <ion-nav-buttons side="left">
        <i class="button button-clear button-positive icon ion-android-arrow-back" ng-click="goParent();"></i>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button type="submit" class="button button-positive button-clear icon ion-arrow-up-b" ng-click="goPrevious()"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="secondary">
        <button type="submit"class="button button-positive button-clear icon ion-arrow-down-b" ng-click="goNext()"></button>
    </ion-nav-buttons>
</ion-nav-bar>

这个app.js

  .state('parent', {
    url: '/parent',
    templateUrl: 'templates/parent.html',
    controller: 'ParentCtrl'
  })

  .state('parent-child', {
    url: '/parent/child/:mailSerialNumber',
    templateUrl: 'templates/parent-child.html',
    controller: 'ChildCtrl'
  })

此controller.js

.controller('ChildCtrl', function ($stateParams, $location, $scope) {

  $scope.URL = {};
  $scope.URL.Parent = "parent"

  $scope.goParent = function () {
      $location.url($scope.URL.Parent);
  };

  $scope.Previous = $stateParams.mailSerialNumber - 1;
  $scope.URL.Previous  = "parent/child/" + $scope.Previous;


  $scope.goPrevious = function () {
      $location.url($scope.URL.Previous);
  };

  $scope.Next = $stateParams.mailSerialNumber + 1;
  $scope.URL.Next = "parent/child/" + $scope.Next;

  $scope.goNext = function () {
      $location.url($scope.URL.Next);
  };

})

如何导航到NavController子页面的兄弟页面？

2 个答案: