Question

在我的标签页之前，我几乎没有其他常规页面，而“＆lt; Back”始终位于左下角。

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

在Ionic2中使用标签时如何取回后退按钮？

Answer 1

看起来这是一个错误。因此，目前似乎不可能发布到npm的内容

请在此处提交问题。

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

这应该是可能的，但有些东西可能会陷入其中。

Answer 2

Meteor 1.2 with barbatus：ionic2-meteor

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

<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的流星1.3.2.4

我认为这也适用于常规离子应用。

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

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

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(); }; } }

Answer 3

如果您执行离子服务并检查标签页的标题，您应该看到<ion-navbar>元素。在该元素内，您将看到一个包含类back-button的按钮。如果您检查按钮样式，则可以看到有一个类使其隐藏display: none。

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

添加

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

现在你已经完成了，并且应该有一个工作后退按钮，弹出标签页并返回上一页！

Answer 4

你可以这样做：

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

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

Answer 5

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

当您push页面上的导航栏时，可以将其视为在页面顶部放置新页面。
当您pop现有页面时，这意味着从页面顶部删除该页面。
当您set root页面时，这意味着您正在清理堆积并只是使用该页面创建新堆。

＆＃34;＆lt;回到＆＃34;功能仅在新页面为pushed时可用，而不是在设置root页面时可用。

回答你原来的问题：

其他页面显示＆＃34;＆lt;回到＆＃34;导航到那些页面的按钮只是pushes它们到堆中，而在标签的情况下，＆＃34;＆lt;回到＆＃34;由于setting页面root而导致功能可能无法使用。

Answer 6

您是否可以使用（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);
  }
}

Answer 7

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

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

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

Answer 8

如果有人遇到这个问题，我想我已经找到了这个问题的主要问题。当您从“模态”或“弹出”推出时会出现问题，因此它会发生导航问题。要以正确的方式执行此操作，请从调用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)
    }
});

离子2 - 标签页丢失了导航

8 个答案: