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。
网友评论