ionic官网地址，如何安装ionic-cli请点击这里

ionnic常用指令

• 创建ionic项目：ionic start projectName
• 创建一个页面（即angular中的组件）：ionic g page page/pageName
• 启动ionic项目：ionic serve --open

简易配置教程

app.module文件是全局配置文件，可在ionicModule.forRoot中进行部分配置

• mode：若值为‘ios’可以设置在所有机型中都以ios风格展示，解决了风格不一致问题。也可以设置其值为‘md’，设置为Android风格。
• backButtonText：设置返回按钮的文本，可以设置问空字符串。

使用示例如下：

imports: [BrowserModule, IonicModule.forRoot({mode: 'ios', backButtonText: ''}), AppRoutingModule]

页面跳转

• 可在a标签中使用routerlink，其值为所要跳转的页面的路径
• 可以像js用事件跳转那样，事件绑定ts写的一个跳转函数，需要用到NaviController。
• 上一个方式NaviController是属于ionic的方法，他是对angular的Router方法进行了封装，因此还可以使用Router。

NavController简介

使用NavController需要先注入，其常用的方法如下：

• back()：返回上一页面
• navigateForward()：前进到一个新页面
• navigateRoot()：进入一个新页面并且清除历史页面，即不能再返回到之前的页面了。具体代码如下：

export class HomePage {
  a = 'color:red';

  constructor(private navController: NavController) {}

  toTest(){
    this.navController.navigateForward('test');
    this.navController.
  }
}

常用组件

• <ion-back-button slot="start"></ion-back-button>：用于返回上一个页面，slot属性可设置其位置

模板语法

• []中括号可用于值绑定
• ()小括号可用于事件绑定
• [()]可用于属性的双向绑定，但绑定是有前提的。双向绑定的属性必须有对应的change事件才能成功。比如想要双向绑定一个[(value)],则其必须有一个valueChange事件。如果没有对应的change事件怎么办？这时候需要自定义change事件，可以在下次笔记中有讲解。但是这样比较麻烦，因此可以使用[(ngModule)]进行双向绑定。
• 注意：[(ngModule)]不能在form中使用，这是ionic框架限制的。

路由传值

• 方式1：页面的ts文件中使用Route进行路由传值，代码如下：

  constructor(private router: Router) {}

  toTest(){
    console.log(this.a);
    this.router.navigate(['/test'], {queryParams: {a: 'b'}});

其中参数有queryParams和params两种，取值时分别用queryParams和params

• 方式2：页面的HTML文件中利用标签的[routerlink]进行值绑定，同时用[queryParams]或[params]进行参数传递。

[routerLink]="['/test,{a,b}]"

路由获取

-不论用哪种方式传参，都是在对应的接收页面中进行获取，通常使用 ActivateRoute进行获取。

constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.queryParams);
  }

其中根据传递参数的方式，queryParams可能需要变为params。