基本概念可以参考这里：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
