7

在我的标签页之前，我几乎没有其他常规页面，并且“< Back”总是出现在左角。

到达我的标签页时，我的标题中丢失了“< Back”。为什么？

在 Ionic2 中使用选项卡时如何恢复后退按钮？

4

8 回答 8

6

看起来这是一个错误。所以目前看来，发布到 npm 的内容是不可能的

请在此处提交问题。

http://ionicframework.com/submit-issue/

这应该是可能的，但有些东西可能已经潜入。

于 2016-01-24T19:33:35.963 回答
4

流星 1.2 与 barbatus:ionic2-meteor

我尝试了@Andreas Siivola所说的尝试（覆盖 ion-tabs .back-button 的 css），它确实弹出了标签页，但不幸的是它没有弹出标签的父页面（包含<ion-tabs>），我离开了带有父导航栏和标签视图曾经所在的黑色区域。然后我可以点击父母的后退按钮，最后回到上一页。因此，我创建了自己的后退按钮，以便可以将点击事件绑定到它。在我所有标签的顶部，我有一个带有后退按钮的导航栏。

<ion-navbar primary *navbar>
    <ion-button start>
        <button clear light (click)="goBack()"><ion-icon name="arrow-back"></ion-icon></button>
    </ion-button>
    <ion-title>TabTitle</ion-title>
</ion-navbar>

然后在我的打字稿文件中，我有点击方法

goBack():void {
    this.nav.rootNav.pop();
}

诀窍是获取 rootNav 并调用 pop()。这使我回到了推送包含选项卡的页面的页面。

编辑： 带有离子角 NPM 的 Meteor 1.3.2.4

我想这也适用于常规的离子应用程序。

ion-tabs ion-navbar-section ion-navbar .back-button {
    display: inline-block;
}

更新：Ionic 2.0.0-rc.5 使用 css 强制显示后退按钮，您可以覆盖后退按钮单击事件并使用以下方法关闭父（选项卡）视图控制器：

this.nav.parent.viewCtrl.dismiss();

tab1.html

<ion-navbar class="force-back-button">

tab1.css

.force-back-button .back-button {
  display: inline-block;
}

tab1.ts

import {OnInit, ViewChild} from '@angular/core';
import {NavController, Navbar} from 'ionic-angular';

export class TabPage implements OnInit {
    @ViewChild(Navbar) navBar:Navbar;

    constructor(public nav:NavController) {
    }

    ngOnInit() {
    }

    ionViewDidLoad() {
        this.navBar.backButtonClick = (e:UIEvent) => {
            console.log("Back button clicked");
            this.nav.parent.viewCtrl.dismiss();
        };
    }
}
于 2016-04-07T21:00:45.347 回答
2

如果您执行 ionic serve 并检查您的标签页的标题，您应该会看到<ion-navbar>element. 在该元素内，您将看到一个带有 class 的按钮back-button。如果您检查按钮样式，您可以看到有一个类使用display: none.

现在检查按钮所在元素的类名<ion-page>。在我的情况下，它是routes-page，然后制作一个.scss文件或使用现有文件（记得将其导入app/pages/theme/app.core.scss）

添加

.tabs-page .back-button {
    display: inline-block;
}

现在你已经完成了，应该有一个可以工作的返回按钮，它会弹出标签页并让你返回上一个！

于 2016-04-06T18:57:25.927 回答
1

你可以这样做：

<div block button nav-pop>go back</div>

请参阅：http: //ionicframework.com/docs/v2/api/components/nav/NavPop/

于 2016-02-26T19:11:21.917 回答
0

这是我为我的需要所做的。导航标题不是选项卡标题，这就是我想要的：

选项卡.html

<ion-navbar *navbar primary>
  <ion-title>
    Unit # {{ unit.number }}
  </ion-title>
</ion-navbar>

<ion-content>
  <ion-tabs>
    <ion-tab tabTitle="Details" tabIcon="information-circle" [root]="_unitDetails"></ion-tab>
    <ion-tab tabTitle="Test" tabIcon="timer" [root]="_unitTests"></ion-tab>    <ion-tab tabTitle="Tools" tabIcon="hammer" [root]="_unitTools"></ion-tab>
  </ion-tabs>
</ion-content>

这样，后退按钮仍然存在并弹回上一页。

于 2016-04-09T18:53:02.067 回答
0

Ionic 中的导航就像一堆页面：

  1. 当您push将页面放在导航上时，可以将其视为将新页面放在堆的顶部。
  2. 当您pop使用现有页面时，这意味着从堆栈顶部删除该页面。
  3. 当你set打开root页面时，这意味着你正在清理你的堆，并简单地用那个页面创建一个新的堆。

“< 返回”功能仅在新页面为 时可用pushed，而不是在root设置页面时可用。

要回答您的原始问题：

其他页面显示“< Back”按钮，因为导航到这些页面只是pushes将它们放在一堆，而在选项卡的情况下，“< Back”功能可能由于setting页面root而不可用。

于 2015-12-26T18:26:04.410 回答
0

您是否可以使用 (select) 事件并调用使用 nav push 和 pop 而不是使用每个选项卡的 [root] 属性的函数？

http://ionicframework.com/docs/v2/api/components/tabs/Tab/

就像是：

<ion-tabs preloadTabs="false">
  <ion-tab (select)="chat()"></ion-tab>
</ion-tabs>

和

import {Chat} from '../chat/chat';

export class Tabs {
  constructor(nav: NavController){
    this.nav = nav;
  }
  chat() {
    this.nav.push(Chat);
  }
}
于 2016-02-04T02:49:07.337 回答
0

如果有人遇到这个问题，我想我已经找到了这个世纪的主要问题。当您从“模态”或“弹出框”推送时会出现问题，因此会出现导航问题。要以正确的方式执行此操作，请从调用 popover 或 modal 的页面执行 push 或 setRoot 。这可以通过“onDidDismiss”函数轻松完成：

//Page which calls popover:
popover.create();

//Page popover: Dismiss existing popover (you may also pass a parameter)
popover.dismiss(myParameter);

//Page which calls popover: Veriry if popover was removed
popover.onDidDismiss(data => {
    if(data == "something")
    {
        //Navigate to new page
        this.nav.push(newPage)
    }
});
于 2017-11-28T12:43:15.773 回答