1.是*ngIf不是*ngif
2.是*ngSwitchCase="'puppies'"不是*ngSwitchCase="puppies"
- 還要注意不要在ngSwitch的前面加星號 (*), 要把星號 (*) 放在ngSwitchCase和ngSwitchDefault的前面
3.使用ion-list的表單
- 做表單一般用
ion-list>ion-item>ion-label-ion-input這時候會發(fā)現(xiàn)最后一個ion-item的線長一點,解決這個問題給ion-list添加inset屬性
- 添加
inset后,其實ion-item最后一條線被取消了,但是又由于android模式的輸入控件有條會變色的驗證線,,導(dǎo)致表單中間線比較粗,所以可以添加'no-lines'屬性取消ion-item的線
*所以...
- 最后,這種情況是android模式的情況,ios不會有驗證線,所以比較省心
- android和ios差異還是挺多的,如果想更省心,像下面這樣修改
app.module.ts統(tǒng)一模式
4.ios沒有Status Bar(狀態(tài)欄)
如下圖,左邊是android手機屏幕,右邊是iPhone手機,發(fā)現(xiàn)ios狀態(tài)欄是透明的,擋住了內(nèi)容,所以有時候要單獨處理ios的這種情況
zhuangta
解決:
5.記錄一個稍微復(fù)雜ngStyle指令的使用
<div *ngFor="let obj of arr;let i = index">
<span [ngStyle]="{'background-image':i<2? 'url(./assets/img/'+(i)+'.png)':'','background-repeat':i<2?'no-repeat':''}">{{i}}</span>
</div>
相對于ngStyle指令樣式綁定更常用:
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
6.<ion-datetime>的值是字符串,并且是使用ISO 8601日期格式作為其值
7. 使用ionic-plugin-keyboard插件監(jiān)聽鍵盤顯示/隱藏
如下圖1頁面底部固定"意見反饋"鏈接.當(dāng)鍵盤彈起時"意見反饋"竟然覆蓋在了登錄按鈕上.如圖2
圖1
圖2
監(jiān)聽鍵盤顯示/隱藏事件如下圖.當(dāng)鍵盤顯示/隱藏控制
show變量改變從而控制"意見反饋"顯示隱藏.這里使用this.changeDetector.detectChanges()讓改變立即生效.否則鍵盤彈起后"意見反饋"才隱藏
8. 鍵盤會把tabs擠上去
-
在真機上input獲得焦點鍵盤就會彈出來,ionic會把input放到頁面可視區(qū)域的中間位置,這是頁面同時有tabs,就會把tabs擠上來,如下圖
- 所以不建議有tabs的頁面還有input,一般我們設(shè)置子頁面隱藏tabs.
如果你的子頁面還有tabs建議添加
tabsHideOnSubPages屬性隱藏tabs
<ion-tab [root]="mineRoot" tabTitle="我的" tabIcon="person" tabsHideOnSubPages></ion-tab>
- 如果你非要在首頁添加input,那就只能監(jiān)聽鍵盤彈出/關(guān)閉事件,然后在事件里面隱藏/顯示tabs
隱藏/顯示tabs,參考:http://www.reibang.com/p/65d2a94cf225
9. formGroup和ngModel不能同時使用.
- 本身使用
formGroup就能代替ngModel,所以就不要混用了
10.還在使用嵌套回調(diào)?
- 下圖newMethod()和oldMethod()做的事是一樣的,大家領(lǐng)會一下newMethod的優(yōu)點,參考鏈接
11.在ios真機上頁面的click事件需要點擊兩次才會觸發(fā).
- 當(dāng)click事件綁定到<button>和<a>上不會存在此問題
-
解決方法1,如下圖
- 解決方法2,給需要點擊的元素添加
tappable屬性.參考click-delays
12.安裝ionic,安裝過程沒有異常.執(zhí)行ionic -v報如下錯誤.
- 解決
復(fù)制其他同事的C:\Users\name.ionic\config.json文件替換你的文件
再次執(zhí)行ionic -v就ok了
