Ionic / Angular ui-router：在导航时将父状态及其子状态计为一个状态

Question

我的抽象状态是一个带有选项卡的框架，根据活动选项卡在下部加载模板。布局类似于：

问题是当我向后导航时，它还会浏览标签，而不是转到之前的状态。我该如何防止这种行为？

这是我父州的模板

<ion-tabs>
  <ion-tab ui-sref="home.user.details">
  </ion-tab>
  <ion-tab ui-sref="home.user.followers">
  </ion-tab>
</ion-tabs>
<ion-nav-view class="inner-view"></ion-nav-view>

这是我的ui-router配置

.state('home.user', {
  url: '/user/:id',
  abstract: false,
  cache: true,
  template: '<user></user>',
  resolve: {
    id: function($stateParams) {
      return $stateParams.id;
    }
  }
})
.state('home.user.details', {
  url: '/details',
  templateUrl: 'template/user.details.html'
})

.state('home.user.followers', {
  url: '/followers',
  templateUrl: 'template/user.followers.html'
})

Answer 1

如果您想在使用硬件后退按钮时执行此操作，您可以使用Ionic的onHardwareBackButton功能通过手动设置应导航到的状态来执行此操作：

$ionicPlatform.onHardwareBackButton(onBackButton);

function onBackButton(e) {
  $state.go('home.user');
}

您可以在选项卡状态中注册以上内容，然后当想要的行为发生如下变化时，使用offHardwareBackButton将其删除：

$ionicPlatform.offHardwareBackButton(onBackButton);

我没有看到后退按钮但是如果你确实有/需要用自制的替换它并使其进入父状态，如下所示：

HTML：

<button class="button" ng-click="goToHome()">
  <i class="icon ion-android-arrow-back"></i>
</button>

控制器：

$scope.goToHome = function() {
  $state.go('home.user');
};