把demo/src/core/common/back.service.ts文件拷贝到到你的项目中。 demo 地址
安装App Minimize 插件。
ionic cordova plugin add cordova-plugin-appminimize npm install --save @ionic-native/app-minimize 复制代码
import { AppMinimize } from '@ionic-native/app-minimize'; import { BackService } from ...; @NgModule({ declarations: [ ... ], imports: [ ... ], providers: [ AppMinimize, BackService ] }) export class AppModule { } 复制代码
一个监听返回键,触发自定义操作的服务
有未执行的自定义操作返回true,无未执行的自定义操作返回false
添加自定义返回键操作
Param | Type | Details |
---|---|---|
calback | function | 自定义操作的函数 |
移除一个自定义返回键操作
发起一个自定义返回键操作
清除所有所有自定义操作
有些项目的第一页不是 Tabs,而是需要登录后,才跳转到 Tabs,所以我们需要在两个地方写预处理,首先给MyApp添加预处理方法,然后给Tabs添加预处理
在app.html添加模板变量#myContent
<ion-nav [root]="rootPage" #myContent></ion-nav> 复制代码
在app.component.ts添加以下代码
import { Platform, Keyboard, NavController } from 'ionic-angular'; import { AppMinimize } from '@ionic-native/app-minimize'; import { BackService } from ...; export class MyApp { @ViewChild('myContent') navCtrl: NavController; constructor( private platform: Platform, private keyboard: Keyboard, private appMinimize: AppMinimize, private backService: BackService ) { platform.ready().then(() => { ... this.registerBack(); }); } // 注册返回键 private registerBack() { this.platform.registerBackButtonAction(() => { if (this.keyboard.isOpen()) { // 关闭键盘 this.keyboard.close(); } else if (this.backService.state) { // 触发自定义返回事件 this.backService.publish(); } else if (this.navCtrl.canGoBack()) { // 返回上一页 this.navCtrl.pop(); } else { // 最小化app this.appMinimize.minimize(); } }, 101); } } 复制代码
在tabs.ts添加以下代码
import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, Platform, Keyboard, Tabs } from 'ionic-angular'; import { AppMinimize } from '@ionic-native/app-minimize'; import { BackService } from ...; ... export class TabsPage { ... @ViewChild(Tabs) tabs: Tabs; constructor( private navCtrl: NavController, private platform: Platform, private keyboard: Keyboard, private appMinimize: AppMinimize, private backService: BackService ) {} ionViewDidLoad() { this.registerBack(); } // 注册返回键 private registerBack() { this.platform.registerBackButtonAction(() => { // 关闭键盘 if (this.keyboard.isOpen()) { return this.keyboard.close(); } // 触发自定义返回事件 if (this.backService.state) { return this.backService.publish(); } const activeVC = this.navCtrl.getActive(); const page = activeVC.instance; if (!(page instanceof TabsPage)) { if (!this.navCtrl.canGoBack()) { // 最小化app return this.appMinimize.minimize(); } return this.navCtrl.pop(); } const tabs = page.tabs; const activeNav = tabs.getSelected(); if (!activeNav.canGoBack()) { // 关闭Menu if (this.menuCtrl.isOpen()) { return this.menuCtrl.close(); } // 最小化app return this.appMinimize.minimize(); } return activeNav.pop(); }, 102); } } 复制代码
通过重载 ActionSheet、Alert、Loading、Modal、Popover 等的 create 方法来监听返回键。
import { Injectable } from '@angular/core'; import { ActionSheetController, ActionSheet, ActionSheetOptions } from 'ionic-angular'; import { BackService } from './back.service'; @Injectable() export class ActionSheetService { constructor( private actionSheetCtrl: ActionSheetController, private backService: BackService ) {} create(options?: ActionSheetOptions): ActionSheet { const actionSheet = this.actionSheetCtrl.create(options); // onWillDismiss的时候,取消订阅返回键 actionSheet.onWillDismiss(() => { this.backService.unsubscribe(); }); this.backService.subscribe(() => { // 点击返回键,关闭 actionSheet.dismiss(); }); return actionSheet; } } 复制代码
import { ActionSheetService } from ...; @NgModule({ declarations: [ ... ], imports: [ ... ], providers: [ ActionSheetService ] }) export class AppModule { } 复制代码
import { ActionSheetService } from ...; export class MyPage { constructor( private alertCtrl:ActionSheetService ) {} presentActionSheet() { const actionSheet = this.alertCtrl.create({ title: 'ActionSheet', buttons: [ ... { text: 'Cancel', role: 'cancel', handler: () => { ... } } ] }); actionSheet.onDidDismiss(() => { ... }); actionSheet.present(); } 复制代码
Alert、Loading、Modal、Popover的实现方法跟 ActionSheet 一样
使用ion-select和ion-datetime需要做特殊处理。
添加模板引用变量并绑定事件click 事件
<ion-select [(ngModel)]="gender" #genderSelect (click)="openSelect()"> <ion-option value="f">Female</ion-option> <ion-option value="m">Male</ion-option> </ion-select> 复制代码
然后添加以下代码
import { ViewChild } from '@angular/core'; import { Select } from 'ionic-angular'; import { BackService } from ...; export class MyPage { ... @ViewChild('genderSelect') genderSelect: Select; constructor(private backService: BackService) {} ionViewDidLoad() { this.genderSelect.ionBlur.subscribe(() => { this.backService.unsubscribe(); }); } openSelect() { this.backService.subscribe(() => { this.genderSelect.close(); }); } } 复制代码
添加模板引用变量并绑定事件click 事件
<ion-item> <ion-label>Date</ion-label> <ion-datetime [(ngModel)]="myDate" #datePicker (click)="openDatePicker()" ></ion-datetime> </ion-item> 复制代码
然后添加以下代码
import { ViewChild } from '@angular/core'; import { DateTime } from 'ionic-angular'; import { BackService } from ...; export class MyPage { ... @ViewChild('datePicker') datePicker: DateTime; constructor(private backService: BackService) {} ionViewDidLoad() { this.datePicker.ionBlur.subscribe(() => { this.backService.unsubscribe(); }); } openDatePicker() { this.backService.subscribe(() => { this.datePicker.close(); }); } } 复制代码
我来评几句
登录后评论已发表评论数()