传送门
跟着官方示例项目学Ionic-1(blank,tabs)
跟着官方示例项目学Ionic-2(tutorial,sidemenu)
跟着官方示例项目学Ionic-3(super)
跟着官方示例项目学Ionic-4(conference)

tutorial 工程

tutorial工程启动后为hello-world页面,
并且有一个menu的开关按钮,点击后弹出菜单.

tutorial-home.png toggle-menu.png

从项目结构来看,也Tabs相差无几,这个项目的最大不同就在于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平台初始化的代码是一致的.
  // ...
  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可发现,<ion-menu>必须和<ion-nav>一起使用才行.因此,在<ion-nav>中,增加了#content生成component的引用变量,然后在
   <ion-menu> 中传入该变量.
2. 而在Ts中,则使用了@ViewChild并传入compoent类型的方法获得<ion-nav>生成的引用变量,当然如果改成以下语句,按照标识符也是一样可以获取的

@ViewChild('content') nav: Nav;

3. openPage()方法,先关闭(隐藏)menu菜单,然后根据点击的page,导航到对应的组件去.值得注意的是这里的page是保存Page自身,然后把compent传递给nav,实现导航.

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

而最好的编程实践中,是把每个page都编程一个module,然后根据其名字进行导航--Super项目.

pages目录

1. 每个页面都是标准的<ion-header>加<ion-content>结构.
2. list和item-details有层级关系,list作为列表的根入口,通过列表的选择可以跳转到具体明细中去.也就是说,这里说明NavController的使用方式.官方文档链接:Navigation-api,NavParams-api

导航的方法调用:

// 第一个参数ItemDetailsPage指示了跳转的目标页面,第二个参数为传入的参数对象,其包含一个item属性.
this.navCtrl.push(ItemDetailsPage, {
      item: item
    });

导航明细页面从navParams中获取传入的item信息,然后通过数据绑定,显示到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 工程几乎一摸一样,唯一的区别在于,它并没有导航明细页面,而是直接导航到自己(同时自己也压栈了).

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

同时,html中增加了如果有传递selectedItem,就把它显示的代码

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