ionic2开发之app.component.ts

1 描述

功能：1.引导页设置；2.Android硬件返回按钮处理；

2 引导页设置

思路：设置一个 持久化变量A，根据变量A的值判断app是否是第一次启动，从而设置rootPage。

代码：

      //引导页
      dataService.getData('hasSeenTutorail').then((hasSeenTutorial)=>{
        if(hasSeenTutorial){
          this.rootPage = HomePage;
          //dataService.clearData('hasSeenTutorail');
        }else{
          this.rootPage = TutorialPage;
          dataService.saveData('hasSeenTutorail',true);
        }

3 Android硬件返回按钮处理

思路：注册放回按钮事件，在事件中编写处理返回按钮的逻辑。

参考：http://www.jianshu.com/p/6aa5a8318092?mType=Group

代码：

registerBackButtonAction() {
     this.platform.registerBackButtonAction(() => {
       let alertDom = document.getElementsByTagName('ion-alert');
       if(alertDom.length == 1){
         for(let i=0;i < alertDom[0].getElementsByClassName('button-inner').length;i++){
           if(alertDom[0].getElementsByClassName('button-inner')[i].innerHTML == "取消"){
              (<HTMLScriptElement>alertDom[0].getElementsByClassName('button-inner')[i]).click();
           }
         }
         return;
       }
       let activePortal = this.ionicApp._modalPortal.getActive();
       if (activePortal) {
         activePortal.dismiss().catch(() => {});
         activePortal.onDidDismiss(() => {});
         return;
       }
       let activeVC = this.nav.getActive();
       let tabs = activeVC.instance.tabs;
       if(typeof(tabs) == 'undefined'){
         return this.showExit();
       }
       let activeNav = tabs.getSelected();
       return activeNav.canGoBack() ? activeNav.pop() : this.showExit();
     }, 1);
   }

    //双击退出提示框
   showExit() {
     if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP
       this.platform.exitApp();
     } else {
       this.tipsService.tipsBottom('再按一次退出应用');
       this.backButtonPressed = true;
       setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
     }
   }

4 完整代码（app.component.ts）

代码：

import { Component,ViewChild } from '@angular/core';
import { App,IonicApp,Platform,Nav } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { TutorialPage } from '../pages/tutorial/tutorial';
import { TipsService } from '../providers/tips.Service';
import { Data } from '../providers/data';
import { ConsultService } from '../providers/consult.service';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage :any;
  backButtonPressed: boolean = false;  //用于判断返回键是否触发
  consultService:ConsultService;
  @ViewChild('myNav') nav: Nav;

  constructor(public tipsService:TipsService,public ionicApp: IonicApp,app:App,public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, dataService:Data,sConsult:ConsultService,keyboard: Keyboard) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      //引导页
      dataService.getData('hasSeenTutorail').then((hasSeenTutorial)=>{
        if(hasSeenTutorial){
          this.rootPage = HomePage;
          //dataService.clearData('hasSeenTutorail');
        }else{
          this.rootPage = TutorialPage;
          dataService.saveData('hasSeenTutorail',true);
        }

        //设置rootPage
        this.registerBackButtonAction();//注册返回按键事件
      });

      //设置键盘
      keyboard.disableScroll(true);
    });

    this.consultService = sConsult;
 
  }

  registerBackButtonAction() {
     this.platform.registerBackButtonAction(() => {
       let alertDom = document.getElementsByTagName('ion-alert');
       if(alertDom.length == 1){
         for(let i=0;i < alertDom[0].getElementsByClassName('button-inner').length;i++){
           if(alertDom[0].getElementsByClassName('button-inner')[i].innerHTML == "取消"){
              (<HTMLScriptElement>alertDom[0].getElementsByClassName('button-inner')[i]).click();
           }
         }
         return;
       }
       let activePortal = this.ionicApp._modalPortal.getActive();
       if (activePortal) {
         activePortal.dismiss().catch(() => {});
         activePortal.onDidDismiss(() => {});
         return;
       }
       let activeVC = this.nav.getActive();
       let tabs = activeVC.instance.tabs;
       if(typeof(tabs) == 'undefined'){
         return this.showExit();
       }
       let activeNav = tabs.getSelected();
       return activeNav.canGoBack() ? activeNav.pop() : this.showExit();
     }, 1);
   }

    //双击退出提示框
   showExit() {
     if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP
       this.platform.exitApp();
     } else {
       this.tipsService.tipsBottom('再按一次退出应用');
       this.backButtonPressed = true;
       setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
     }
   }

//关闭咨询提醒服务
   ionViewWillUnload() {
     this.consultService.CloseSocket();
   }
}