web-dev-qa-db-ja.com

前の画面に戻る方法ionic 2

ionic qでは、前の画面に戻るために$ionichistory.goback()を使用します。しかし、ionic 2では、どのようにしてそれを達成できますか。そして、このボタンをクリックすると、コンソールメッセージが表示されますが、機能しません。

<ion-buttons left class="loginnavbtn" (click)="goback()">
  CANCEL
</ion-buttons>

。js

goback() {
   console.log('Click on button Test Console Log');
}

私を助けてください。 2つの画面があります。最初の画面から次の画面に移動するとき。次の画面に戻るというボタンが1つあります。押すと、最初の画面に戻ります。そのようにする方法？

私の完全なコード：

html：

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left class="loginnavbtn" (click)="goback()">

    CANCEL
    <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      LOGIN
    </ion-title>

    <ion-buttons right class="loginnavbtn" (click)="loginbtntap()">
    SAVE
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>


   </ion-content>

my .js：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';



@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})

export class LoginPage {


 goback() {
    this.navCtrl.pop();
}
loginbtntap() {
    this.navCtrl.pop();
}

  constructor(private navCtrl:NavController) {



  }

}

my .scss：

page-login {
ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
  }
}

.loginnavbtn {

  color: #116096 !important;
   font-size: 14px;
    font-weight: 400;
}
}
htmlangularionic2hybrid-mobile-app
6
hybrid Dev

ドキュメントで NavController API を確認します。

前のページに移動するには、コンストラクタにnavcontrollerを挿入し、pop()を呼び出します。

constructor(private navCtrl:NavController){}

goback() {
   this.navCtrl.pop();
   console.log('Click on button Test Console Log');
}

button の構文も確認してください。

<ion-buttons >
    <button ion-button left class="loginnavbtn" (click)="goback()">
      Cancel
    </button>
    <!-- left aligned content here -->
    </ion-buttons>
14
Suraj Rao

Ionic=のナビゲーションは次のように機能します：

1。ページのプッシュ：

pageone.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PageTwo }from '../pagetwo/pagetwo';

@Component({
  templateUrl: 'pageone.html'
})
export class PageOne {
  constructor(public navCtrl: NavController) {}

  Push() {
    this.navCtrl.Push(PageTwo);
  }
}

pageone.html

<ion-header>
  <ion-navbar>
    <ion-title>Navigation</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button block (click)="Push()">Push New Page</button>
</ion-content>

2.POPページ：

pagetwo.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'pagetwo.html'
})
export class PageTwo {

  constructor(public navCtrl: NavController) {}

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

pagetwo.html

<ion-header>
  <ion-navbar>
    <ion-title>Page 2</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button color="secondary" block (click)="pop()">Pop This         
Page</button>
</ion-content>
5
Jayaprakash G