สร้างตัวแปร contacts
เป็นชนิด any[]
นำมาแสดงผลเป็น list
แบบ button
และเมื่อ click จะเรียกหน้าถัดไปมาแสดงค่าของ item ที่ถูก click
สร้างโปรเจ็กส์
[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 15 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <button (click)="goContact(contact)" ion-item *ngFor="let contact of contacts"> {{contact.title}} {{contact.contact}} </button> </ion-list> </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 21 22 23 24 25 26 27 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Platform, ActionSheetController } from 'ionic-angular'; import { DetailPage } from '../detail/detail'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { contacts: any[]; constructor(public navCtrl: NavController) { this.contacts = [ { title: 'AAA', contact: '111' }, { title: 'BBB', contact: '222' }, { title: 'CCC', contact: '333' }, { title: 'DDD', contact: '444' } ] } goContact(contact) { this.navCtrl.push(DetailPage, {item: contact}) } } |
แก้ไขไฟล์ 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> {{detail.title}} </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 22 23 24 25 26 27 28 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; /** * Generated class for the DetailPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-detail', templateUrl: 'detail.html', }) export class DetailPage { detail: any; //Array<any>; constructor(public navCtrl: NavController, public navParams: NavParams) { this.detail = this.navParams.get('item'); } ionViewDidLoad() { console.log('ionViewDidLoad DetailPage'); } } |
[BOXMOBILEDEV] Ionic 3 EP4 : สร้างหน้าใหม่ navCtrl , navParams