ionic官網(wǎng)地址，如何安裝ionic-cli請點(diǎn)擊這里
ionnic常用指令
- 創(chuàng)建ionic項(xiàng)目：ionic start projectName
- 創(chuàng)建一個(gè)頁面（即angular中的組件）：ionic g page page/pageName
- 啟動(dòng)ionic項(xiàng)目：ionic serve --open
簡易配置教程
app.module文件是全局配置文件，可在ionicModule.forRoot中進(jìn)行部分配置
- mode：若值為‘ios’可以設(shè)置在所有機(jī)型中都以ios風(fēng)格展示，解決了風(fēng)格不一致問題。也可以設(shè)置其值為‘md’，設(shè)置為Android風(fēng)格。
- backButtonText：設(shè)置返回按鈕的文本，可以設(shè)置問空字符串。
使用示例如下：
imports: [BrowserModule, IonicModule.forRoot({mode: 'ios', backButtonText: ''}), AppRoutingModule]
頁面跳轉(zhuǎn)
- 可在a標(biāo)簽中使用routerlink，其值為所要跳轉(zhuǎn)的頁面的路徑
- 可以像js用事件跳轉(zhuǎn)那樣，事件綁定ts寫的一個(gè)跳轉(zhuǎn)函數(shù)，需要用到NaviController。
- 上一個(gè)方式NaviController是屬于ionic的方法，他是對angular的Router方法進(jìn)行了封裝，因此還可以使用Router。
NavController簡介
使用NavController需要先注入，其常用的方法如下：
- back()：返回上一頁面
- navigateForward()：前進(jìn)到一個(gè)新頁面
- navigateRoot()：進(jìn)入一個(gè)新頁面并且清除歷史頁面，即不能再返回到之前的頁面了。具體代碼如下：
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>：用于返回上一個(gè)頁面，slot屬性可設(shè)置其位置
模板語法
- []中括號(hào)可用于值綁定
- ()小括號(hào)可用于事件綁定
- [()]可用于屬性的雙向綁定，但綁定是有前提的。雙向綁定的屬性必須有對應(yīng)的change事件才能成功。比如想要雙向綁定一個(gè)[(value)],則其必須有一個(gè)valueChange事件。如果沒有對應(yīng)的change事件怎么辦？這時(shí)候需要自定義change事件，可以在下次筆記中有講解。但是這樣比較麻煩，因此可以使用[(ngModule)]進(jìn)行雙向綁定。
- 注意：[(ngModule)]不能在form中使用，這是ionic框架限制的。
路由傳值
- 方式1：頁面的ts文件中使用Route進(jìn)行路由傳值，代碼如下：
constructor(private router: Router) {}
toTest(){
console.log(this.a);
this.router.navigate(['/test'], {queryParams: {a: 'b'}});
其中參數(shù)有queryParams和params兩種，取值時(shí)分別用queryParams和params
- 方式2：頁面的HTML文件中利用標(biāo)簽的[routerlink]進(jìn)行值綁定，同時(shí)用[queryParams]或[params]進(jìn)行參數(shù)傳遞。
[routerLink]="['/test,{a,b}]"
路由獲取
-不論用哪種方式傳參，都是在對應(yīng)的接收頁面中進(jìn)行獲取，通常使用 ActivateRoute進(jìn)行獲取。
constructor(private route: ActivatedRoute) {
console.log(this.route.snapshot.queryParams);
}
其中根據(jù)傳遞參數(shù)的方式，queryParams可能需要變?yōu)閜arams。
