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了

实时更新......

作者：小军617
链接：https://www.jianshu.com/p/66a09265a9c9