ionic 开发问题记录

ionic 使用说明

1.命令大全:http://blog.csdn.net/gaoqinghuadage/article/details/73168264
  A.ionic g [name]·············· 生成page、component等
    [--list] ·············· 列出可用的生成器
    [--skipScss] ·············· 在创建page或component时不创建scss文件
    [--pagesDir] ·············· 指定创建page的路径，component、directive、pipe、provider同理

demo:ionic g page life-home-room --pagesDir src/pages/lifehome/

ionic g page YourPageName //创建新页面
ionic g directive YourPageName //创建指令
ionic g component YourComponentName //创建组件
ionic g provider YourProviderName //创建服务
ionic g pipe YourPipeName //创建过滤器
  B.


问题搜集：
1.android不支持设置状态栏颜色，需要原生协助


this.navCtrl.remove(this.navCtrl.length(), 2);
this.navCtrl.popTo(this.navCtrl.getByIndex(this.navCtrl.length() - 3));


angular语法使用

1.多重条件判断

  使用else块
  <div *ngIf="condition; else elseBlock">...</div>
  <ng-template #elseBlock>...</ng-template>

  使用then和else块
  <div *ngIf="condition; then thenBlock else elseBlock"></div>
  <ng-template #thenBlock>...</ng-template>
  <ng-template #elseBlock>...</ng-template>




ionic 生命周期

  ionViewDidLoad() {
    /*当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发*/
    plus.navigator.setStatusBarStyle("light");
  }

  constructor() {

  }

  ionViewWillEnter() {
    /*顾名思义，当将要进入页面时触发*/
  }

  ionViewDidEnter() {
    /*当进入页面时触发*/
  }

  ionViewWillLeave() {
    /*当将要从页面离开时触发*/
  }

  ionViewDidLeave() {
    /*离开页面时触发*/
    plus.navigator.setStatusBarStyle("dark");
  }

  ionViewWillUnload() {
    /*当页面将要销毁同时页面上元素移除时触发*/
  }

demo====
   ionViewDidLoad(){
        console.log("1.0 ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发");
    }
    ionViewWillEnter(){
        console.log("2.0 ionViewWillEnter 顾名思义，当将要进入页面时触发");
    }
    ionViewDidEnter(){
        console.log("3.0 ionViewDidEnter 当进入页面时触发");
    }
    ionViewWillLeave(){
        console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");
    }
    ionViewDidLeave(){
        console.log("5.0 ionViewDidLeave 离开页面时触发");
    }
    ionViewWillUnload(){
        console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
    }

    ionViewCanEnter(){
        console.log("ionViewCanEnter");
    }

    ionViewCanLeave(){
        console.log("ionViewCanLeave");
    }



===============
providers:[
  {provide: LocationStrategy, useClass: HashLocationStrategy}
]


=========获取元素高度 home demo
1.
<ion-content #HomePageId>
  @ViewChild('HomePageId') HomePageId;
  this.HomePageId.contentHeight

2.
<div class="card-panel bg-white margin-bottom-defult" #sceneBox>
 @ViewChild('headerBox') headerBox: ElementRef;
 this.headerBox.nativeElement.offsetHeight


 =========获取主动刷新页面
 http://blog.csdn.net/railsbug/article/details/77239509
 private ref: ChangeDetectorRef 库文件
 this.ref.detectChanges();

 =======向后后退n个页面的方法

this.navCtrl.popTo(this.navCtrl.getByIndex(this.navCtrl.length() - 1 - n));


========退出登录后重新登陆后点击返回页面返回到登陆页面等一系列错误源于：rootPage设置错误
解决方案为：管理rootPage 即可-->具体例子为app.component.ts  this.rootPage = rootPageName;


========= 限制输入框不能输入中文  ==》demo页面 login.html
onkeydown="if(event.keyCode==13)event.keyCode=9" onKeypress="if
((event.keyCode<48 || event.keyCode>57)){event.returnValue=false}"

demo===》
<ion-input class="flex-item" type="password" onkeydown="if(event.keyCode==13)event.keyCode=9" onKeypress="if
((event.keyCode<48 || event.keyCode>57)){event.returnValue=false}" formControlName="newpwd"
                   placeholder="请输入您的密码"></ion-input>
ionic 开发问题记录

猜你喜欢
