angular-ui-router - 如何避免在标签栏状态中堆叠导航历史记录

Question

选项卡 A - 选项卡 B - 选项卡 C

像下面这样的状态；
tabs.a, tabs.b, tab.c

我想关闭应用程序，就像在每个选项卡状态切换时没有导航历史记录一样

例如:我在 Tab A 然后我点击 Tab B 然后我从现在开始点击 Tab C 如果用户按下后退按钮应用程序应该关闭。在正常行为中，导航历史会堆积起来，如果我按下后退按钮，我会从选项卡 C 转到选项卡 B。如何避免这种行为

以下是我的代码；

.state('tabs', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html"
            })
            .state('tabs.a', {
                url: "/a",
                views: {
                    'a-tab': {
                        templateUrl: "templates/a.html",
                        controller: 'AController'
                    }
                }
            }).state('tabs.b', {
                url: "/b",
                views: {
                    'b-tab': {
                        templateUrl: "templates/b.html",
                        controller: 'BController'
                    }
                }
            }).state('tabs.c', {
                url: "/c",
                views: {
                    'c-tab': {
                        templateUrl: "templates/c.html",
                        controller: 'CController'
                    }
                }
            });

<ion-tabs class="tabs-royal tabs-striped">
    <ion-tab title="A" href="#/tab/a">
        <ion-nav-view name="a-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="B" href="#/tab/b">
        <ion-nav-view name="b-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="C" href="#/tab/c">
        <ion-nav-view name="b-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Answer 1

您可以拦截每个 Controller 中的后退按钮。
来自 documentation :

registerBackButtonAction(callback, priority, [actionId]) Register a hardware back button action. Only one action will execute when the back button is clicked, so this method decides which of the registered back button actions has the highest priority.

For example, if an actionsheet is showing, the back button should close the actionsheet, but it should not also go back a page view or close a modal which may be open.

The priorities for the existing back button hooks are as follows: Return to previous view = 100 Close side menu = 150 Dismiss modal = 200 Close action sheet = 300 Dismiss popup = 400 Dismiss loading overlay = 500

Your back button action will override each of the above actions whose priority is less than the priority you provide. For example, an action assigned a priority of 101 will override the 'return to previous view' action, but not any of the other actions.

在您的 Controller 中，您可以为后退按钮注册一个监听器，并在按下后退出:

.controller('AController', function($scope, $ionicPlatform){
    var deregister = $ionicPlatform.registerBackButtonAction(
            function () {
                ionic.Platform.exitApp();
            }, 100
    );
    $scope.$on('$destroy', deregister)    
})    

.controller('BController', function($scope, $ionicPlatform){
    var deregister = $ionicPlatform.registerBackButtonAction(
            function () {
                ionic.Platform.exitApp();
            }, 100
    );
    $scope.$on('$destroy', deregister)    


})

.controller('CController', function($scope, $ionicPlatform){
  var deregister = $ionicPlatform.registerBackButtonAction(
            function () {
                ionic.Platform.exitApp();
            }, 100
    );
    $scope.$on('$destroy', deregister)    

});

备注 :

您的最后一个选项卡 (C TAB) 应具有名称: c-tab :

<ion-tab title="C" href="#/tab/c">
    <ion-nav-view name="c-tab"></ion-nav-view>
</ion-tab>