如何避免在标签栏状态下堆叠导航历史

Question

标签 A - 标签 B - 标签 C

如下状态； tabs.a, tabs.b, tab.c

我想关闭应用，就像在每个标签状态切换时没有导航历史一样

例如：我在选项卡 A 中，然后单击选项卡 B，然后从现在开始单击选项卡 C，如果用户按下按钮，应用程序应该关闭。在正常行为中，导航历史会堆积起来，如果我按下返回按钮，我将从 Tab C 转到 Tab 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

您可以拦截每个控制器中的后退按钮。
来自documentation：

registerBackButtonAction(callback, priority, [actionId]) 注册一个 硬件后退按钮动作。当 后退按钮被点击，所以这个方法决定了注册的哪个 后退按钮操作具有最高优先级。

例如，如果正在显示操作表，则返回按钮应该 关闭操作表，但它也不应该返回页面视图或 关闭可能打开的模式。

现有后退按钮挂钩的优先级如下： 返回上一视图 = 100 关闭侧边菜单 = 150 关闭模式 = 200 关闭操作表 = 300 关闭弹出窗口 = 400 关闭加载 叠加 = 500

您的后退按钮操作将覆盖上述每个操作 优先级低于您提供的优先级。例如，一个动作 分配优先级 101 将覆盖“返回上一个视图” 操作，但不是任何其他操作。

在您的控制器中，您可以为返回按钮注册一个监听器，如果它被按下则退出：

.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>

Answer 2

我用一种简单的方法做到了 在标签状态的控制器范围内添加了一个功能

.state('tabs', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html",
                controller: function($scope, $ionicTabsDelegate, $ionicHistory) {
                    $scope.rt = function(e, index) {
                        $ionicTabsDelegate.select(index);
                        //e.preventDefault();
                        $ionicHistory.nextViewOptions({historyRoot:true});
                    }
                }
            })

并在 tabs.html 模板中的每个 ion-tab 指令上添加 ng-click，如下所示；

<ion-tab ng-click="rt($event, 0)" title="A" href="#/tab/a">

rt函数的第二个参数是tab的索引

我使用了 $ionicHistory.nextViewOptions({historyRoot:true});

来自documentation

nextViewOptions()
设置下一个视图的选项。这种方法可以 在 视图转换发生。例如，menuClose 指令使用 此方法在内部确保动画视图转换不会 当侧边菜单打开时发生，并且还将下一个视图设置为 其历史堆栈的根。转换后设置这些选项 返回null。

可用选项：

disableAnimate：不要为下一个过渡设置动画。
disableBack：下一个视图应该忘记它的后视图，并将其设置为 null。
historyRoot： 下一个视图应该成为其历史堆栈中的根视图。

这样我就实现了我想要的