ภาพที่ 1 : เพจ Login ไม่อยู่ในแทบ และไม่แสดงเมนู (เพจอื่นๆนอกจาก Login แสดงเมนูได้)
ภาพที่ 2 : เพจ Home, About และ Contact อยู่ในแทบ
ภาพที่ 3 : กดด้านบนซ้าย หรือรูทจากหน้าจอด้านซ้ายมาด้านขวา แสดงเมนู
ภาพที่ 4 : เพจ Help ไม่อยู่ในแทบ
ภาพที่ 5 : เพจ More มีหน้าจอ logout
สร้างโปรเจ็กส์
[code]
> ionic start tabsApp tabs
[/code]
สร้างหน้า login
[code]
> ionic g page login
[/code]
สร้างเพจชื่อ more
[code]
ionic g page more
[/code]
สร้างเพจชื่อ help
[code]
ionic g page help
[/code]
แก้ไขไฟล์
- src/app/app.module.ts
- src/app/app.components.ts
- src/app/app.html
- src/pages/login/login.html
- src/pages/login/login.ts
- src/pages/home/home.ts
- src/pages/home/home.html
- src/pages/about/about.html
- src/pages/contact/contact.html
- src/pages/help/help.html
- src/pages/tabs/tabs.html
- src/pages/tabs/tabs.ts
- src/pages/more/more.html
- src/pages/more/more.ts
1. 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { LoginPage } from '../pages/login/login'; import { MorePage } from '../pages/more/more'; import { HelpPage } from '../pages/help/help'; @NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage, LoginPage, MorePage, HelpPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage, LoginPage, MorePage, HelpPage ], providers: [ StatusBar, SplashScreen, { provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule { } |
2. src/app/app.components.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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import { Component, ViewChild } from '@angular/core'; import { Nav, Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { TabsPage } from '../pages/tabs/tabs'; import { LoginPage } from '../pages/login/login'; import { HelpPage } from '../pages/help/help'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage:any = LoginPage; pages: Array<{ title: string, component: any, icon: string, index: number }>; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); this.pages = [ { title: 'Home', component: TabsPage, icon: "home", index: 0 }, { title: 'About', component: TabsPage, icon: "information-circle", index: 1 }, { title: 'Contact', component: TabsPage, icon: "contacts", index: 2 }, { title: 'More', component: TabsPage, icon: "ios-more", index: 3 }, { title: 'Help', component: HelpPage, icon: "help", index: 4 } ]; } openPage(page) { let params = {}; if (page.index) { params = { tabIndex: page.index }; } this.nav.setRoot(page.component, params); } } |
3. src/app/app.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> {{p.title}} </button> </ion-list> </ion-content> </ion-menu> <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> |
4. src/pages/login/login.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ion-header> <ion-navbar> <ion-title>login</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>Username</ion-label> <ion-input type="text" value=""></ion-input> </ion-item> <ion-item> <ion-label floating>Password</ion-label> <ion-input type="password" value=""></ion-input> </ion-item> </ion-list> <div padding> <button (click)="goTabs()" ion-button color="primary" block>Sign In</button> </div> </ion-content> |
5. src/pages/login/login.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, MenuController } from 'ionic-angular'; import { TabsPage } from '../tabs/tabs'; @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { constructor(public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) { this.menu.enable(false); } ionViewDidLoad() { console.log('ionViewDidLoad LoginPage'); } goTabs() { this.navCtrl.setRoot(TabsPage); } } |
บรรทัดที่ 13 : ไม่แสดงเมนูที่เพจ login
6. src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Component } from '@angular/core'; import { NavController, MenuController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, public menu: MenuController) { this.menu.enable(true); } } |
7. src/pages/home/home.html
8. src/pages/about/about.html
9. src/pages/contact/contact.html
10. src/pages/help/help.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h2>Welcome to Ionic!</h2> <p> This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI. </p> <p> Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new pages. </p> </ion-content> |
ข้อ 7-10 เพิ่มบรรทัดที่ 3-5 เหมือนกัน
11. src/pages/tabs/tabs.html
1 2 3 4 5 6 |
<ion-tabs [selectedIndex]="selectedIndex"> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> <ion-tab [root]="tab4Root" tabTitle="More" tabIcon="ios-more"></ion-tab> </ion-tabs> |
12. src/pages/tabs/tabs.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 |
import { Component } from '@angular/core'; import { NavParams, NavController } from 'ionic-angular'; import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact'; import { HomePage } from '../home/home'; import { MorePage } from '../more/more'; @Component({ templateUrl: 'tabs.html' }) export class TabsPage { tab1Root = HomePage; tab2Root = AboutPage; tab3Root = ContactPage; tab4Root = MorePage; selectedIndex: any; constructor(navParams: NavParams, public navCtrl: NavController) { console.log("tabs: navParams.data.tabIndex: " + navParams.data.tabIndex); this.selectedIndex = navParams.data.tabIndex || 0; // if (navParams.data.tabIndex == 3) { // navCtrl.setRoot(HelpPage); // } } } |
13. src/pages/more/more.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>more</ion-title> </ion-navbar> </ion-header> <ion-content padding> More <div padding> <button (click)="goLogin()" ion-button color="danger" block>Log out</button> </div> </ion-content> |
14. src/pages/more/more.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 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, App } from 'ionic-angular'; import { LoginPage } from '../login/login'; @IonicPage() @Component({ selector: 'page-more', templateUrl: 'more.html', }) export class MorePage { constructor(public navCtrl: NavController, public navParams: NavParams, public app: App) { //this.navCtrl.setRoot(HelpPage); console.log("navParams.data.tabIndex: " + navParams.data.tabIndex); } goLogin() { this.navCtrl.setRoot(LoginPage); let nap = this.app.getRootNav(); nap.setRoot(LoginPage); } ionViewDidLoad() { console.log('ionViewDidLoad MorePage'); } } |
Link