針對(duì)Ionic-4

傳送門
跟著官方示例項(xiàng)目學(xué)Ionic-1(blank,tabs)
跟著官方示例項(xiàng)目學(xué)Ionic-2(tutorial,sidemenu)
跟著官方示例項(xiàng)目學(xué)Ionic-3(super)
跟著官方示例項(xiàng)目學(xué)Ionic-4(conference)

tutorial 工程

tutorial工程啟動(dòng)后為hello-world頁面,
并且有一個(gè)menu的開關(guān)按鈕,點(diǎn)擊后彈出菜單.

tutorial-home.png

toggle-menu.png

從項(xiàng)目結(jié)構(gòu)來看,也Tabs相差無幾,這個(gè)項(xiàng)目的最大不同就在于app.html和app.component.ts不是直接包含<ion-nav>,還另外加上了<ion-menu>.

app.html

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

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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

app.component.ts

export class MyApp {
@ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage = HelloIonicPage;
  pages: Array<{title: string, component: any}>;
  
  // 中間initializeApp()方法和tabs平臺(tái)初始化的代碼是一致的.
  // ...
  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }
}

1. 這是教科書式的menu的使用方法,通過查看文檔 MENU-api可發(fā)現(xiàn),<ion-menu>必須和<ion-nav>一起使用才行.因此,在<ion-nav>中,增加了#content生成component的引用變量,然后在
   <ion-menu> 中傳入該變量.
2. 而在Ts中,則使用了@ViewChild并傳入compoent類型的方法獲得<ion-nav>生成的引用變量,當(dāng)然如果改成以下語句,按照標(biāo)識(shí)符也是一樣可以獲取的

@ViewChild('content') nav: Nav;

3. openPage()方法,先關(guān)閉(隱藏)menu菜單,然后根據(jù)點(diǎn)擊的page,導(dǎo)航到對(duì)應(yīng)的組件去.值得注意的是這里的page是保存Page自身,然后把compent傳遞給nav,實(shí)現(xiàn)導(dǎo)航.

this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];

而最好的編程實(shí)踐中,是把每個(gè)page都編程一個(gè)module,然后根據(jù)其名字進(jìn)行導(dǎo)航--Super項(xiàng)目.

pages目錄

1. 每個(gè)頁面都是標(biāo)準(zhǔn)的<ion-header>加<ion-content>結(jié)構(gòu).
2. list和item-details有層級(jí)關(guān)系,list作為列表的根入口,通過列表的選擇可以跳轉(zhuǎn)到具體明細(xì)中去.也就是說,這里說明NavController的使用方式.官方文檔鏈接:Navigation-api,NavParams-api

導(dǎo)航的方法調(diào)用:

// 第一個(gè)參數(shù)ItemDetailsPage指示了跳轉(zhuǎn)的目標(biāo)頁面,第二個(gè)參數(shù)為傳入的參數(shù)對(duì)象,其包含一個(gè)item屬性.
this.navCtrl.push(ItemDetailsPage, {
      item: item
    });

導(dǎo)航明細(xì)頁面從navParams中獲取傳入的item信息,然后通過數(shù)據(jù)綁定,顯示到html上.

constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    // 從傳入的navParams中獲取傳入的信息.
    this.selectedItem = navParams.get('item');
  }

sidemenu 工程

sidemenu 工程 和 tutorial 工程幾乎一摸一樣,唯一的區(qū)別在于,它并沒有導(dǎo)航明細(xì)頁面,而是直接導(dǎo)航到自己(同時(shí)自己也壓棧了).

    // 把自己-ListPage壓棧
    this.navCtrl.push(ListPage, {
      item: item
    });

同時(shí),html中增加了如果有傳遞selectedItem,就把它顯示的代碼

<div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>