Ionic 2 - 標籤頁丟失導航

Question

在我的標籤頁之前，我有其他幾個常規頁面，並且「<返回」總是出現在左上角。

當到達我的標籤頁時，我在頭部丟失了「<返回」。爲什麼？

如何在使用Ionic2中的選項卡時返回後退按鈕？

Answer 1

在離子導航工程作品就像一堆網頁：

1. 當你push到導航頁面，也可以作爲放置新頁面上的樁頂想到的。
2. 當你pop現有的頁面，這意味着從堆棧頂部刪除該頁面。
3. 當你setroot頁面，這意味着你正在清理你的樁，並簡單地創建一個新的樁與該頁面。

的「<後退」功能將只提供如果一個新的頁面pushed，不是當root頁面設置。

要回答你原來的問題：

其他頁面顯示「<返回」按鈕，因爲瀏覽這些網頁只是pushes他們的樁，而標籤的情況下，「<後退」功能可能而不是由於setting而不是root頁面。

Answer 2

看起來像這是一個錯誤。所以目前看來，這是不可能的發佈到npm

請在這裏提交問題。

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

這應該是可能的事，但可能在已經悄悄。

Answer 3

你能不能使用（選擇）事件並調用它使用導航推送功能和流行，而不是使用[根]每個標籤的屬性？

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 4

你可以做這樣的事情：

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

參見： http://ionicframework.com/docs/v2/api/components/nav/NavPop/

Answer 5

如果你做離子發球並檢查你的標籤頁的標題，你應該看到<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 6

流星1.2石竹：ionic2-流星

我試圖說什麼@Andreas Siivola嘗試（覆蓋在離子標籤.back按鈕的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（）。這讓我回到推送包含選項卡頁面的頁面。

編輯： 流星1.3.2.4與離子棱角NPM

我想這也將在常規離子應用程序正常工作。

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

更新：離子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(); 
     }; 
    } 
} 

Answer 7

這裏什麼我做了我的需求。導航標題不是標籤標題，這是我想要的：

標籤。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) 
    } 
});