สร้างตัวแปร fullname
เป็นชนิด string
นำมาแสดงผล {{fullname}}
และมีปุ่มให้คลิก เมื่อ click จะเรียกหน้าถัดไปมาแสดงค่าของ fullname
สร้างโปรเจ็กส์
[code]
> ionic start navApp blank
> cd navApp
> ionic serve
[/code]
สร้าง Page
ขึ้นมาใหม่ชื่อว่า detail
[code]
> ionic g page detail
[/code]
แก้ไขไฟล์ src/app/app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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; constructor(public navCtrl: NavController) { this.fullname = "Jack"; } goDetail() { this.navCtrl.push(DetailPage, {fullname: this.fullname}); } } |
แก้ไขไฟล์ src/pages/detail/detail.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-header> <ion-navbar> <ion-title>detail</ion-title> </ion-navbar> </ion-header> <ion-content padding> {{fullname}} </ion-content> |
แก้ไขไฟล์ src/pages/detail/detail.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-detail', templateUrl: 'detail.html', }) export class DetailPage { fullname: string; constructor(public navCtrl: NavController, public navParams: NavParams) { this.fullname = this.navParams.get('fullname'); } ionViewDidLoad() { console.log('ionViewDidLoad DetailPage'); } } |
[BOXMOBILEDEV] Ionic 3 EP4 : สร้างหน้าใหม่ navCtrl , navParams