离子型：从选项卡视图导航离开时，没有后退按钮 [英] Ionic: No back button when navigating away from tab view

问题描述

我无法弄清楚如何让后退按钮导航从标签视图客场单页视图时显示。单页面视图不应该有标签栏。我可以让后退按钮出现时，我做我导航到标签层次结构的一部分的观点，但是这不是我想要的。

I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.

我一直环顾四周，似乎无法找到关于这个问题的帖子。我可能不会寻找合适的关键字。

I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.

我的设立是这样的...

My set up is this...

标签：tab.feed，tab.friends，tab.account

tabs: tab.feed, tab.friends, tab.account

另一种观点：randompage

other view: randompage

下面是我的路线设置...

Here is my route set up...

.state('randompage', {
    url:'/randompage',
    templateUrl: 'templates/randompage.html',
    controller: 'RandomPageCtrl'
})

.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html',
  controller: 'TabCtrl'
})

.state('tab.feed', {
  url: '/feed',
  views: {
    'tab-feed': {
      templateUrl: 'templates/tab-feed.html',
      controller: 'FeedCtrl'
    }
  }
})

下面是tabs.html

Here is the tabs.html

<ion-tabs class="tabs-icon-top tabs-top">
    <!-- Feed Tab -->
    <ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
        <ion-nav-view name="tab-feed"></ion-nav-view>
    </ion-tab>

    <!-- The rest are just from the tab skeleton -->
    <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
        <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
        <ion-nav-view name="tab-account"></ion-nav-view>
    </ion-tab>
</ion-tabs>

下面是制表feed.html

Here is the tab-feed.html

<ion-view title="Feed">
    <ion-nav-buttons side="right">
        <a class="button button-icon ion-android-camera" href="#/randompage"></a>
    </ion-nav-buttons>
    <ion-content class="padding">
        <h1>Feed</h1>
    </ion-content>
</ion-view>

下面是randompage.html

Here is the randompage.html

<ion-view title="Random Page">
    <ion-content lass="padding">
    </ion-content>
</ion-view>

导航的一切，正确地显示，除了返回按钮没有显示。

Everything navigates and shows correctly except the back button is not showing.

请让我知道如果你知道有什么替代的解决方案，可能是什么，我可能是错的做，还是需要更多的信息。

Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.

谢谢！

推荐答案

我有同样的问题。通过检查源$ C ​​$ C，离子设置了一个默认的历史堆栈名为root的历史，视图推弹出堆栈为用户导航通过应用程序。然而，选项卡视图取出这个默认的历史堆栈和一个新的堆栈将设置它。

I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.

    splash view --> tab view --> random page (out of tab)
                        |
                        tab1 --> nested view (in tab)
                        |
                        tab2 --> nested view (in tab)

根历史堆栈：

    splash view ---> random page

标签历史堆栈：

    tab view ---> tab1 --> nested view
             ---> tab2 --> nested view

我无法找到一个简单的方法来改变这种行为。但有我的一种替代方法的工作。我创建了一个普通的离子视图，并通过组成自己，所以没有新的历史堆栈将创建的标签视图。

I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.

<ion-view title="tabs">
    <ion-content padding="false">
        <ion-pane>
            <ion-nav-view name="tab-content"></ion-nav-view>
        </ion-pane>
        <div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
            <a class="tab-item">
                <i class="icon ion-home"></i>
                Home
            </a>
            <a class="tab-item">
                <i class="icon ion-star"></i>
                Favorites
            </a>
            <a class="tab-item">
                <i class="icon ion-gear-a"></i>
                Settings
            </a>
        </div>
    </ion-content>
</ion-view>

，那么你可以设置你的$ stateProvider加载不同的标签视图为制表内容模仿离子标签的行为。当然，你必须自己保持标签的活动状态。

then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.

这篇关于离子型：从选项卡视图导航离开时，没有后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！