ionic3: สร้าง Submenu #3 | Phaisarn Sutheebanjard

เตรียมโปรเจ็กส์
เตรียมเมนู
app.component.ts
วาดเมนู และเรียกใชงานเมนู

1. เตรียมโปรเจ็กส์

[code]
ionic start Sidemenu sidemenu
[/code]

สร้างเพจ topic1 และ topic2

[code]
cd Sidemenu
ionic g page topic1
ionic g page topic2
[/code]

สร้าง provider menu

[code]
ionic g provider menu
[/code]

ลบโฟลเดอร์ src/pages/list

2. เตรียมเมนู

src/providers/menu/menu.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class MenuProvider {

  constructor(public http: HttpClient) {
    console.log('Hello MenuProvider Provider');
  }

  getSideMenus() {
    return [{
      title: 'Home', component: 'HomePage'
    },
    {
      title: 'Topics',
      subPages: [{
        title: 'Topic1',
        component: 'Topic1Page',
      }, {
        title: 'Topic2',
        component: 'Topic2Page',
      }]
    }];
  }
}

import { HttpClient } from '@angular/common/http';

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

@Injectable()

export class MenuProvider {

constructor(public http: HttpClient) {

console.log('Hello MenuProvider Provider');

}

getSideMenus() {

return [{

title: 'Home', component: 'HomePage'

{

title: 'Topics',

subPages: [{

title: 'Topic1',

component: 'Topic1Page',

}, {

title: 'Topic2',

component: 'Topic2Page',

}]

}];

}

3. app.module.ts

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
//import { ListPage } from '../pages/list/list';
import { Topic1Page } from '../pages/topic1/topic1';
import { Topic2Page } from '../pages/topic2/topic2';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MenuProvider } from '../providers/menu/menu';
import { HttpClientModule } from '@angular/common/http';

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

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

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

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

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

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

//import { ListPage } from '../pages/list/list';

import { Topic1Page } from '../pages/topic1/topic1';

import { Topic2Page } from '../pages/topic2/topic2';

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

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

import { MenuProvider } from '../providers/menu/menu';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

MyApp,

HomePage,

//ListPage

Topic1Page,

Topic2Page

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

HttpClientModule

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

//ListPage

Topic1Page,

Topic2Page

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

MenuProvider

]

})

export class AppModule {}

4. app.component.ts

src/app/app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
//import { ListPage } from '../pages/list/list';
import { Topic1Page } from '../pages/topic1/topic1';
import { Topic2Page } from '../pages/topic2/topic2';

import { MenuProvider } from '../providers/menu/menu';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  //pages: Array<{title: string, component: any}>;
  pages: any;

  selectedMenu: any;

  constructor(public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public menuProvider: MenuProvider,
    public menuCtrl: MenuController) {

    this.initializeApp();

    // used for an example of ngFor and navigation
    // this.pages = [
    //   { title: 'Home', component: HomePage },
    //   { title: 'List', component: ListPage }
    // ];

  }

  initializeApp() {
    this.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.
      this.getSideMenuData();

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  getSideMenuData() {
    this.pages = this.menuProvider.getSideMenus();
  }

  openPage(page, index) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    if (page.component) {
      switch (page.component) {
        case "HomePage": this.nav.setRoot(HomePage); break;
        case "Topic1Page": this.nav.setRoot(Topic1Page); break;
        case "Topic2Page": this.nav.setRoot(Topic2Page); break;
      }

      this.menuCtrl.close();
    } else {
      if (this.selectedMenu) {
        this.selectedMenu = 0;
      } else {
        this.selectedMenu = index;
      }
    }
  }
}

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

import { Nav, Platform, MenuController } from 'ionic-angular';

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

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

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

//import { ListPage } from '../pages/list/list';

import { Topic1Page } from '../pages/topic1/topic1';

import { Topic2Page } from '../pages/topic2/topic2';

import { MenuProvider } from '../providers/menu/menu';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

@ViewChild(Nav) nav: Nav;

rootPage: any = HomePage;

//pages: Array<{title: string, component: any}>;

pages: any;

selectedMenu: any;

constructor(public platform: Platform,

public statusBar: StatusBar,

public splashScreen: SplashScreen,

public menuProvider: MenuProvider,

public menuCtrl: MenuController) {

this.initializeApp();

// used for an example of ngFor and navigation

// this.pages = [

// { title: 'Home', component: HomePage },

// { title: 'List', component: ListPage }

// ];

}

initializeApp() {

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

this.getSideMenuData();

this.statusBar.styleDefault();

this.splashScreen.hide();

});

}

getSideMenuData() {

this.pages = this.menuProvider.getSideMenus();

}

openPage(page, index) {

// Reset the content nav to have just this page

// we wouldn't want the back button to show in this scenario

if (page.component) {

switch (page.component) {

case "HomePage": this.nav.setRoot(HomePage); break;

case "Topic1Page": this.nav.setRoot(Topic1Page); break;

case "Topic2Page": this.nav.setRoot(Topic2Page); break;

}

this.menuCtrl.close();

} else {

if (this.selectedMenu) {

this.selectedMenu = 0;

} else {

this.selectedMenu = index;

}

5. วาดเมนู และเรียกใชงานเมนู

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>
          <ion-item ion-item *ngFor="let p of pages;  let i=index" (click)="openPage(p, i);">
              <ion-row>
                  <!-- Parent Pages  -->
                  <ion-col col-9 class="menu-name">
                      <span ion-text>
                          {{p.title}}
                          <ion-icon [name]="selectedMenu == i? 'arrow-down' : 'arrow-forward'" *ngIf="p.subPages" float-right></ion-icon>
                      </span>

                      <!-- Child Pages  -->
                      <ion-list no-lines [hidden]="selectedMenu != i">
                          <ion-item no-border *ngFor="let subPage of p.subPages;let i2=index" text-wrap (click)="openPage(subPage)">
                              <ion-row>
                                  <ion-col col-10 class="menu-name">
                                      <span ion-text color="color2">&nbsp;{{subPage.title}}</span>
                                  </ion-col>
                              </ion-row>
                          </ion-item>
                      </ion-list>
                  </ion-col>
              </ion-row>
          </ion-item>
      </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>

<ion-item ion-item *ngFor="let p of pages; let i=index" (click)="openPage(p, i);">

<ion-row>

<ion-col col-9 class="menu-name">

<ion-icon [name]="selectedMenu == i? 'arrow-down' : 'arrow-forward'" *ngIf="p.subPages" float-right></ion-icon>

</span>

<ion-list no-lines [hidden]="selectedMenu != i">

<ion-item no-border *ngFor="let subPage of p.subPages;let i2=index" text-wrap (click)="openPage(subPage)">

<ion-row>

<ion-col col-10 class="menu-name">

<span ion-text color="color2"> {{subPage.title}}</span>

</ion-col>

</ion-row>

</ion-item>

</ion-list>

</ion-col>

</ion-row>

</ion-item>

</ion-list>

</ion-content>

</ion-menu>

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

src/pages/home/home.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>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</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>

<h3>Ionic Menu Starter</h3>

<p>

If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.

</p>

<button ion-button secondary menuToggle>Toggle Menu</button>

</ion-content>

Note: home.html มีเมนูอยู่แล้ว ไม่ต้องแก้ไขอะไร

src/pages/topic1/topic1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>topic1</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

<ion-header>

<ion-navbar>

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

</button>

<ion-title>topic1</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

src/pages/topic1/topic2.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>topic2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

<ion-header>

<ion-navbar>

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

</button>

<ion-title>topic2</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

Link

Ionic 3 Multi Level Accordion Menu
Multi-level Side Menu ยังไม่ได้ลอง แต่น่าจะเจ๋งดี