IONIC 2 后退按钮锁定在 ion-navbar

Question

我在使用 ionic 2 导航时遇到了一些问题。我有两个页面，交易和交易结果。

这是我的交易页面和 ts 文件。

<ion-header>
  <ion-navbar>
       <button ion-button menuToggle start>
            <ion-icon name="menu"></ion-icon>
          </button>

    <ion-title>Transaction</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="secondary">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-list>
      <ion-list-header>
         Search Transaction
      </ion-list-header>

        <ion-item>
                <ion-label stacked>Client Name</ion-label>
                <ion-input [(ngModel)]="ClientName" type="text"></ion-input>
        </ion-item>
        <ion-item>
                <ion-label stacked>Transaction No</ion-label>
                <ion-input [(ngModel)]="TransactionNo" type="text"></ion-input>
        </ion-item>
        <ion-item>
                <ion-label stacked>Status</ion-label>
                <ion-select [(ngModel)]="StatusTr">
                  <ion-option value="{{st}}" *ngFor="let st of StatusArray">{{st}}</ion-option>                 
                </ion-select>
        </ion-item>
        <ion-item>
                <ion-label stacked>Invoice</ion-label>
                <ion-select [(ngModel)]="Invoice">
                  <ion-option value="{{Inv}}" *ngFor="let Inv of InvoiceArray">{{Inv}}</ion-option>                 
                </ion-select>
        </ion-item>
        <ion-item>
            <div item-content item-left>
               <div item-content item-left>Transaction Date</div>
                <ion-label stacked>From Date</ion-label>
                <ion-datetime displayFormat="DD/MMM/YYYY"  min="2013" max="2020-12-31"[(ngModel)]="transferDate"></ion-datetime>
            </div> 
        </ion-item>
        <ion-item>
            <div item-content item-left>
               <ion-label stacked>To Date</ion-label>
                <ion-datetime displayFormat="DD/MMM/YYYY"  min="2013" max="2020-12-31"[(ngModel)]="transferDateTo"></ion-datetime>
            </div>
        </ion-item>
        <ion-item>
            <button ion-button block color="royal" (click)="searchTrans()" >
              Search
            </button>
        </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

以下是导航到另一个页面的打字稿函数，称为交易结果，称为searchTrans()。

import { Component } from '@angular/core';
import { NavController,MenuController } from 'ionic-angular';
import {ShareService} from '../../share/ShareService';
import {transCrit} from '../../viewmodel/transCrit';
import {TransResult} from '../trans-result/trans-result';

@Component({
  selector: 'page-transaction',
  templateUrl: 'transaction.html'
})
export class Transaction {

  ClientName:string;
  TransactionNo:string;
  StatusTr:string;
  Invoice:string;
  transferDate:string;
  transferDateTo:string;

  StatusArray:string[];
  InvoiceArray:string[];
  passerVM:transCrit;

  constructor(public navCtrl: NavController,public menu:MenuController,private shareServe:ShareService) {
     this.menu.swipeEnable(true);

     this.StatusArray = ["Successful","Submit","Reject","Draft","Delete","Archive"];
     this.InvoiceArray =["All","Invoice Issued","Not Invoice"];

     this.ClientName = "";
     this.TransactionNo = "";
     this.StatusTr = "";
     this.Invoice = "";
     this.transferDate = this.todayDate(this.transferDate);
     this.transferDateTo = this.todayDate(this.transferDateTo);    

  }

  ionViewDidLoad() {
    console.log('Hello Transaction Page');
  }

  todayDate(datetoDay :string) {
      let utc = new Date().toJSON().slice(0,10);
      if (datetoDay === undefined ){
        return utc;
      }
  }

  searchTrans(){
      this.passerVM = new transCrit(this.ClientName,this.Invoice,this.StatusTr,this.TransactionNo,this.transferDate,this.transferDateTo);

      this.navCtrl.push(TransResult, {mdlPasser : this.passerVM});
  }

}

这是我的交易结果页面

<ion-header>
  <ion-navbar>

    <ion-title>trans-result</ion-title>

  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

这是交易结果页面的打字稿文件

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController,MenuController } from 'ionic-angular';

@Component({
  selector: 'page-trans-result',
  templateUrl: 'trans-result.html'
})
export class TransResult {

  constructor(public navCtrl: NavController,private navParams: NavParams, private viewCtrl:ViewController, private menu:MenuController) {
      this.menu.swipeEnable(false);
  }

  goBack(){
    this.navCtrl.pop();
  }

  ionViewDidLoad() {
     console.log(this.navCtrl.canGoBack());
     console.log(this.navParams.get('mdlPasser'));
  }

}

我的问题是我可以在交易结果页面中看到返回按钮。它由 ionic 2 框架自动添加。但这个按钮被锁定，完全无法点击。有没有办法让后退按钮活着。

最佳 Rgds， 青蛙

Answer 1

调试它，在您的 home.scss 和 trans-result.scss 中设置（都是全局定义的，而不是页面范围 btw）

ion-title{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
}

这使得ion-title '覆盖'后退按钮。这样，当您单击它时，您单击的是标题而不是返回按钮。

将您的样式减少到：

ion-title{
  margin-left: -12%;
  text-align: center;
}

保持标题看起来完全相同，并且后退按钮有效。

Answer 2

添加hideBackButton="true"

<ion-header hideBackButton="true">
    <ion-navbar>
        <ion-title>trans-result</ion-title>
    </ion-navbar>
</ion-header>