ionic3: NavController เปลี่ยนหน้าพร้อมส่งข้อมูล string ไปให้ และรับค่าสตริงกลับได้

สร้างตัวแปร fullname เป็นชนิด string
นำมาแสดงผล {{fullname}}
และมีปุ่มให้คลิก เมื่อ click จะเรียกหน้าถัดไปมาแสดงค่าของ fullname

และเมื่อกดปุ่ม Dismiss เพื่อย้อนกลับจะส่งค่ามาเก็บไว้ในตัวแปร myReturnValue
โดยดูค่าตัวแปร myReturnValue ได้จาก F12

สร้างโปรเจ็กส์

[code]
> ionic start navApp blank
> cd navApp
> ionic serve
[/code]

สร้าง Page ขึ้นมาใหม่ชื่อว่า detail

[code]
> ionic g page detail
[/code]

แก้ไขไฟล์ src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailPage } from '../pages/detail/detail';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetailPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { DetailPage } from '../pages/detail/detail';

@NgModule({

declarations: [

MyApp,

HomePage,

DetailPage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

DetailPage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

แก้ไขไฟล์ src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>
    Fullname: {{fullname}}
  </p>
  <button ion-button (click)="goDetail()" >Detail</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>

Fullname: {{fullname}}

</p>

<button ion-button (click)="goDetail()" >Detail</button>

</ion-content>

แก้ไขไฟล์ src/pages/home/home.ts

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

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

  fullname: string;
  myReturnValue: string;

  constructor(public navCtrl: NavController) {
    this.fullname = "Jack";
    this.myReturnValue = "";
  }

  goDetail() {
    this.navCtrl.push(DetailPage, {fullname: this.fullname, callback: this.myCallbackFunction});
    //this.navCtrl.setRoot(DetailPage, {fullname: this.fullname, callback: this.myCallbackFunction});
  }

  myCallbackFunction = (_params) => {
    return new Promise((resolve, reject) => {
        this.myReturnValue = _params;
        console.log(" r > ", this.myReturnValue['val']);
        resolve();
    });
   }  
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { DetailPage } from '../detail/detail';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

fullname: string;

myReturnValue: string;

constructor(public navCtrl: NavController) {

this.fullname = "Jack";

this.myReturnValue = "";

}

goDetail() {

this.navCtrl.push(DetailPage, {fullname: this.fullname, callback: this.myCallbackFunction});

//this.navCtrl.setRoot(DetailPage, {fullname: this.fullname, callback: this.myCallbackFunction});

}

myCallbackFunction = (_params) => {

return new Promise((resolve, reject) => {

this.myReturnValue = _params;

console.log(" r > ", this.myReturnValue['val']);

resolve();

});

}

แก้ไขไฟล์ src/pages/detail/detail.html

<ion-header>

  <ion-navbar>
    <ion-title>detail</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>{{fullname}}</p>

  <button ion-button (click)="goDismiss()" >Dismiss</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>detail</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>{{fullname}}</p>

<button ion-button (click)="goDismiss()" >Dismiss</button>

</ion-content>

แก้ไขไฟล์ src/pages/detail/detail.ts

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

@IonicPage()
@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html',
})
export class DetailPage {

  fullname: string;
  callback: any;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController) {
    this.fullname = this.navParams.get('fullname');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailPage');
  }

  ionViewWillEnter() {
    this.callback = this.navParams.get("callback")
  }

  /*ionViewWillLeave() {
    this.callback({xx: "123"}).then(()=>{
      this.navCtrl.pop();
      //this.viewCtrl.dismiss();
    });
  }*/

  goDismiss() {
    this.callback({val: "123"}).then(()=>{
      //this.navCtrl.pop();
      this.viewCtrl.dismiss();
      //this.viewCtrl.dismiss();
    });
  }
}

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-detail',

templateUrl: 'detail.html',

})

export class DetailPage {

fullname: string;

callback: any;

constructor(public navCtrl: NavController,

public navParams: NavParams,

public viewCtrl: ViewController) {

this.fullname = this.navParams.get('fullname');

}

ionViewDidLoad() {

console.log('ionViewDidLoad DetailPage');

}

ionViewWillEnter() {

this.callback = this.navParams.get("callback")

}

/*ionViewWillLeave() {

this.callback({xx: "123"}).then(()=>{

this.navCtrl.pop();

//this.viewCtrl.dismiss();

});

}*/

goDismiss() {

this.callback({val: "123"}).then(()=>{

//this.navCtrl.pop();

this.viewCtrl.dismiss();

//this.viewCtrl.dismiss();

});

}

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

ionic3: NavController เปลี่ยนหน้าพร้อมส่งข้อมูล string ไปให้ และรับค่าสตริงกลับได้