ionic3 Login-Logout แบบมี SideMenu

ภาพที่ 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

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 { }

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

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);
  }
}

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

<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>

<ion-menu [content]="content">

<ion-header>

<ion-toolbar>

<ion-title>Menu</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list>

</button>

</ion-list>

</ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

4. src/pages/login/login.html

<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>

<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>

</ion-content>

5. src/pages/login/login.ts

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);
  }
}

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

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);
  }

}

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

<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>

<ion-header>

<ion-navbar>

<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

<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>

<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

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);
    // }
  }
}

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

<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>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>more</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</div>

</ion-content>

14. src/pages/more/more.ts

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');
  }

}

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

Disable side menu on login page conference app

Phaisarn Sutheebanjard

blog.phaisarn.com

ionic3 Login-Logout แบบมี SideMenu