Question

我在离子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>

以下是导航到称为事务结果的另一个页面的typescript函数，称为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＆＃39;躺在＆＃39;后退按钮。这样，当您单击它时，您单击标题而不是后退按钮。

将您的风格缩减为：

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>

IONIC 2后退按钮锁定在离子导航栏上

2 个答案: