ionic开发入门之创建新页面并导航到新页面

基本概念可以参考这里：Ionic 2 With TypeScript 入门
补充记录一点遇到的问题。

1.创建新页面

新建项目后会有homePage。
这里以建立一个新页面叫ListPage为例，页面参考homepage一样照葫芦画瓢
ListPage.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      List Page
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
</ion-content>

这里的ion-header就相当于html中的head，ion-content就相当于body。
注意这里的ion-navbar，添加这个使用导航。

ListPage.ts:

import { Component } from '@angular/core';
import {NavController} from "ionic-angular";

@Component({
  templateUrl: 'list.html'
})
export class ListPage {
  constructor(public navCtrl: NavController) {
    console.log('List Page Constructor initialization!');
  }
}

这里的constructor是构造函数，生成新页面的时候会执行，可以把初始化都放在这里。

2.导航到新页面

在home.ts中添加导航到新页面的代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {ListPage} from "../list/list";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {//构造函数，用于初始化，会在类生成实例时调用（new的时候）
    console.log('Home Page Constructor initialization!');
    // 导航到新页面
    this.navCtrl.push(ListPage, {
     //传递的参数
      id: 123,
      name: "list"
    });
  }
}

然后发现报错：

Did you add it to @NgModule.entryComponents?

这里其实是需要在app.module.ts中的@NgModule里将新页面注册一下。

declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],

其中的ListPage就是list.ts文件中定义的类名。
然后就可以看到新页面push进来了，然后还可以从顶部的导航栏返回之前的页面。

3.使用按钮跳转

在home.ts中添加一个按钮

<button ion-button (click)="pushPage()">Button</button>

在home.ts中添加pushPage方法

pushPage(){
    console.log('button click!');
    this.navCtrl.push(ListPage, {
      id: 123,
      name: "list"
    });
  }

so easy！然而为什么看了好多中文的文档里都没有写(click)="pushPage()"这个语法。倒是英文的ionic documentation里写得挺详细的。奇怪。

---

相关github地址：https://github.com/codeqian/listPageDemo