Question

我的问题是，当我从主页状态导航到 user.tab1 状态时，后退按钮不会出现在导航栏中，我该如何解决这个问题问题，我是离子新手

我的项目中有这种状态：

    var app = angular.module('myApp', ['ionic']);
    app
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: './templates/test/home.html'
            })
            .state('user', {
                url: '/user',
                templateUrl: './templates/test/user.html'
            })
            .state('user.tab1', {
                url: '/tab1',
                views: {
                    'tab1': {
                        templateUrl: './templates/test/tab1.html'
                    }
                }
            })
            .state('user.subtab1', {
                url: '/subtab1',
                views: {
                    'tab1': {
                        templateUrl: './templates/test/sub-tab1.html'
                    }
                }
            })
            .state('user.tab2', {
                url: '/tab2',
                views: {
                    'tab2': {
                        templateUrl: './templates/test/tab2.html'
                    }
                }
            });
        $urlRouterProvider.otherwise("/home");
    });

这些是模板：

的index.html

<body ng-app="myApp">
    <ion-nav-bar class="bar bar-calm">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
</body>

home.html的

<ion-view view-title="Home">
    <ion-content>
        <a ui-sref="user.tab1">user.tab1</a>
    </ion-content>
</ion-view>

user.html

<ion-view view-title="User">
    <ion-tabs>
        <ion-tab title="tab1" href="#/user/tab1">
            <ion-nav-view name="tab1"></ion-nav-view>
        </ion-tab>

        <ion-tab title="tab2" href="#/user/tab2">
            <ion-nav-view name="tab2"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

tab1.html

<ion-view view-title="tab1">
    <ion-content>
        tab1
        <br />
        <a ui-sref="user.subtab1">user.subtab1</a>
    </ion-content>
</ion-view>

tab2.html

<ion-view view-title="tab2">
    <ion-content>
        tab2
    </ion-content>
</ion-view>

子tab1.html

<ion-view view-title="sub-tab1">
    <ion-content>
        sub-tab1
    </ion-content>
</ion-view>

更新

我将状态更改为这些，但是当我从家庭状态导航到用户时，后退按钮不会出现：

$stateProvider
        .state('main', {
            url: '/main',
            abstract: true,
            templateUrl: './templates/test/main.html'
        })
        .state('home', {
            url: '/home',
            parent: 'main',
            views: {
                'home-view': {
                    templateUrl: './templates/test/home.html'
                }
            }
        })
        .state('user', {
            url: '/user',
            parent: 'main',
            views: {
                'user-view': {
                    templateUrl: './templates/test/user.html'
                }
            }
        })

main.html中

<ion-nav-view name="home-view">
</ion-nav-view>

<ion-nav-view name="user-view">
</ion-nav-view>

Answer 1

这里的问题是您的用户状态不是您所在州的孩子。在您的配置中只有tab1＆amp; tab2状态是用户状态的子节点。

因此不会出现后退按钮。

示例：

    .state('home', {
    url: '/home',
    templateUrl: 'templates//test/home.html'
  })

  .state('home.user', {...

熟悉抽象状态的概念作为导航的根源。抽象状态是无法导航到的状态。如this question中所述。

我的项目结构中没有出现ion-nav-back-button？

1 个答案: