1.是*ngIf不是*ngif
2.是*ngSwitchCase="'puppies'"不是*ngSwitchCase="puppies"
- 还要注意不要在ngSwitch的前面加星号 (*), 要把星号 (*) 放在ngSwitchCase和ngSwitchDefault的前面
3.使用ion-list的表单
- 做表单一般用
ion-list>ion-item>ion-label-ion-input这时候会发现最后一个ion-item的线长一点,解决这个问题给ion-list添加inset属性
- 添加
inset后,其实ion-item最后一条线被取消了,但是又由于android模式的输入控件有条会变色的验证线,,导致表单中间线比较粗,所以可以添加'no-lines'属性取消ion-item的线
*所以...
- 最后,这种情况是android模式的情况,ios不会有验证线,所以比较省心
- android和ios差异还是挺多的,如果想更省心,像下面这样修改
app.module.ts统一模式
4.ios没有Status Bar(状态栏)
如下图,左边是android手机屏幕,右边是iPhone手机,发现ios状态栏是透明的,挡住了内容,所以有时候要单独处理ios的这种情况
zhuangta
解决:
5.记录一个稍微复杂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插件监听键盘显示/隐藏
如下图1页面底部固定"意见反馈"链接.当键盘弹起时"意见反馈"竟然覆盖在了登录按钮上.如图2
图1
图2
监听键盘显示/隐藏事件如下图.当键盘显示/隐藏控制
show变量改变从而控制"意见反馈"显示隐藏.这里使用this.changeDetector.detectChanges()让改变立即生效.否则键盘弹起后"意见反馈"才隐藏
8. 键盘会把tabs挤上去
-
在真机上input获得焦点键盘就会弹出来,ionic会把input放到页面可视区域的中间位置,这是页面同时有tabs,就会把tabs挤上来,如下图
- 所以不建议有tabs的页面还有input,一般我们设置子页面隐藏tabs.
如果你的子页面还有tabs建议添加
tabsHideOnSubPages属性隐藏tabs
<ion-tab [root]="mineRoot" tabTitle="我的" tabIcon="person" tabsHideOnSubPages></ion-tab>
- 如果你非要在首页添加input,那就只能监听键盘弹出/关闭事件,然后在事件里面隐藏/显示tabs
隐藏/显示tabs,参考:http://www.jianshu.com/p/65d2a94cf225
9. formGroup和ngModel不能同时使用.
- 本身使用
formGroup就能代替ngModel,所以就不要混用了
10.还在使用嵌套回调?
- 下图newMethod()和oldMethod()做的事是一样的,大家领会一下newMethod的优点,参考链接
11.在ios真机上页面的click事件需要点击两次才会触发.
- 当click事件绑定到<button>和<a>上不会存在此问题
-
解决方法1,如下图
- 解决方法2,给需要点击的元素添加
tappable属性.参考click-delays
12.安装ionic,安装过程没有异常.执行ionic -v报如下错误.
- 解决
复制其他同事的C:\Users\name.ionic\config.json文件替换你的文件
再次执行ionic -v就ok了
