Ionic快速入门：基础操作，添加页面，页面导航切换

 
  这篇笔记整理了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-