这篇笔记整理了Ionic的基本概念、最直观常用的添加页面、以及在不同页面之间导航跳转的方式。
一、Ionic介绍
ionic 抛弃了 Angular 中的路由框架，而是实现了自己的堆栈式页面导航功能，通过简单的 push 和 pop方法，实现页面的跳转和返回，更符合移动开发习惯。
ionic的优点很明显，就是写起来快，write once,run anywhere。除了少数需要针对不同平台特性的适配外，其他的一套代码搞定，使用不同的打包命令，可以生成在Android和iOS上运行的APP。
ionic的缺点也是很明显，性能，还是性能，Android 4.4以下就别使用此框架了。安卓低端机上比较卡顿，用户体验不是很好。
二、Ionic常用基础操作
安装指定版本的ionic：npm install -g ionic@x.xx.xxx（版本号）
创建ionic3应用：ionic start xxx（项目名）xxx（模板名） --type=ionic-angular
不跳出升级提示：在命令后加上–no-interactive
运行：ionic serve（浏览器自动打开加上–open）
添加页面：ionic g page xxx（页面名）以Tabs模板为基础
三、添加页面
1.命令行语句：ionic g page xxx（页面名）
2.app.module.ts会自动导入新页面
3.在@NgModule中声明（declaration）XxxPage，在entryComponents中也加入XxxPage
import {SynopsisPage} from "../pages/synopsis/synopsis";@NgModule({declarations: [SynopsisPage,],entryComponents: [SynopsisPage,],
（2）使用RouterLink指令定义链接，它定义了如何像在组件模板中声明的那样导航到指定路由。
四、Ionic应用的页面导航
4.1 基本导航
ionic的导航通过组件处理，它是NavController的声明性组件，作为简单的堆栈，用新页面被推入与弹出来进行导航。
首先要用“root”属性将创建的任何Nav最初加载的根页面设置为：
import {StartPage } from 'start' @Component({template: '<ion-nav [root]="rootPage"></ion-nav>' }) class MyApp {// First page to push onto the stack rootPage = StartPage; }
通过将导入控制器中的导航控制器注入任何页面来访问导航控制器。要注意的是，页面组件不需要选择器，Ionic会自动添加这些。
@Component({template: <ion-header> <ion-navbar> <ion-title>Login</ion-title> </ion-navbar></ion-header> <ion-content>Hello World</ion-content>}) export class StartPage {constructor(public navCtrl: NavController) {} }
要从一个页面导航到另一个页面，只需将新页面推送或弹出到堆栈：
@Component({template: <ion-header> <ion-navbar> <ion-title>Login</ion-title> </ion-navbar> </ion-header> <ion-content> <button (click)="goToOtherPage()">Go to OtherPage </button> </ion-content>}) export class StartPage {constructor(public navCtrl: NavController) {} goToOtherPage() {//将另一页推入历史堆栈 //导致导航控制器为新页面设置动画 this.navCtrl.push(OtherPage); } } @Component({template: <ion-header> <ion-navbar> <ion-title>Other Page</ion-title> </ion-navbar> </ion-header> <ion-content>I'm the other page!</ion-content>}) class OtherPage {}
如果页面有一个，若它不是根页面将自动添加一个后退按钮，并且将更新导航栏的标题。
或者若想返回但没有NavBar，则可以将当前页面弹出堆栈：
@Component({template: <ion-content><button (click)="goBack()"> There's no place like home </button> </ion-content>}) class OtherPage {constructor(public navCtrl: NavController) {} goBack() {this.navCtrl.pop(); } }
4.2 从根组件导航
如果想从根应用程序组件控制导航，任何作为导航控制器的组件都是根组件的子组件，因此无法注NavController。
通过向其添加引用变量ion-nav，可以使用@ViewChild获取Nav组件的实例，该组件是导航控制器（它扩展NavController）：
@Component({template: '<ion-nav #myNav [root]="rootPage"></ion-nav>' }) export class MyApp {@ViewChild('myNav') nav; rootPage = TabsPage; // Wait for the components in MyApp's template to be initialized // In this case, we are waiting for the Nav identified by // the template reference variable #myNav ngAfterViewInit() {// Let's navigate from TabsPage to Page1 this.nav.push(LoginPage); } }
4.3 选项卡导航tabs
导航嵌套在选项卡组件中使用。
初始化选项卡：
import {Component } from '@angular/core'; import {Tab1 } from './tab1-page'; import {Tab2 } from './tab2-page'; @Component({template:<ion-tabs> <ion-tab tabIcon="heart" [root]="tab1"></ion-tab> <ion-tab tabIcon="star" [root]="tab2"></ion-tab> </ion-tabs>}) class MyApp {tab1: any; tab2: any; constructor() {this.tab1 = Tab1; this.tab2 = Tab2; } }
单个标签是@Components
import {Component } from '@angular/core'; @Component({template: <ion-header> <ion-navbar> <ion-title>Heart</ion-title> </ion-navbar> </ion-header> <ion-content>Tab 1</ion-content>}) export class Tab1 {} @Component({template: <ion-header> <ion-navbar> <ion-title>Star</ion-title> </ion-navbar></ion-header> <ion-content>Tab 2</ion-content>}) export class Tab2 {}
每个绑定到一个[root]属性，每个都是一个导航控制器。这意味着每个选项卡都有自己的历史堆栈，每个选项卡的NavController instances injected子项@Components对每个选项卡都是唯一的：
import {Component } from '@angular/core'; import {NavController } from 'ionic-angular'; @Component({... }) class Tab1 {constructor(public navCtrl: NavController) {// Id is 1, nav refers to Tab1 console.log(this.nav.id) } } @Component({... }) class Tab2 {constructor(public navCtrl: NavController) {// Id is 2, nav refers to Tab2 console.log(this.nav.id) } }
如果觉得《Ionic快速入门：基础操作 添加页面 页面导航切换》对你有帮助，请点赞、收藏，并留下你的观点哦！
