我正在使用 ionic 4 项目的角度路由（@angular/router）来禁用 ionic 4 中的设备后退按钮，防止默认不工作下面是我的代码
app.component.ts
this.platform.backButton.subscribe(() => {
if (this.router.url === '/Login') {
this.util.presentAppExitAlert();
} else {
// event.preventDefault();
console.log("invoing url ", this.router.url);
}
});
});
我无法在此处禁用设备后退按钮的任何帮助
【问题讨论】：
标签： angular typescript ionic-framework ionic4 angular-router
initializeApp() {
this.platform.ready().then(() => {
this.platform.backButton.subscribeWithPriority(9999, () => {
document.addEventListener('backbutton', function (event) {
event.preventDefault();
event.stopPropagation();
console.log('hello');
}, false);
});
this.statusBar.styleDefault();
});
}
【讨论】：
document.removeAllEventListener('backbutton')。
我发现了如何撤消它（返回按钮以前的功能）：
您的观察者被推送到this.platform.backButton.observers 数组。所以你只需要弹出列表的最后一个元素：
this.platform.backButton.observers.pop();
希望它对某人有所帮助。
【讨论】：
05-02-2020
这对我有用。
app.component.ts
async initializeApp(): Promise<void> {
await this.platform.ready();
this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
});
}
【讨论】：
我找到了更好的方法来避免返回按钮设备，并在你想要的任何页面上禁用返回
import { Router, NavigationEnd } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class DisableBackService {
// page disable back button
private blackLists: string[] = ['/tab/wall', '/event-list', '/tutorial', '/offline-message'];
constructor(private router: Router) {
// call every have change page
this.router.events.subscribe((ev) => {
if (ev instanceof NavigationEnd) {
const blackList = this.blackLists.find(el => ev.url.includes(el));
if (blackList) {
this.disableBack();
} else {
this.enableBack();
}
}
});
}
private logger() {
console.log('disable back button');
}
disableBack() {
document.addEventListener('backbutton', this.logger, false);
}
enableBack() {
document.removeEventListener('backbutton', this.logger, false);
}
}
【讨论】：
提到使用capacitor 处理后退按钮可能相关，这将禁用文档中描述的默认后退按钮行为：
/**
* Listen for the hardware back button event (Android only). Listening for this event will disable the
* default back button behaviour, so you might want to call `window.history.back()` manually.
* If you want to close the app, call `App.exitApp()`.
*/
addListener(eventName: 'backButton', listenerFunc: (data: AppUrlOpen) => void): PluginListenerHandle;
用法：
import { Plugins, AppState } from '@capacitor/core';
const { App } = Plugins;
App.addListener('backButton', (data: AppUrlOpen) => {
console.log('User pushed the back button, default behaviour has been overiden');
});
【讨论】：
您可以实现禁用特定页面的硬件返回按钮。在 ionic 4 中使用以下代码。
ionViewDidEnter() {
this.backbutton = this.platform.backButton.observers.pop();
}
ionViewWillLeave() {
this.platform.backButton.observers.push(this.backbutton);
}
【讨论】：
在ionic 5中使用LoadingController时禁用硬件后退按钮。参考前两个答案并将它们合并到加载控制器代码中
import {
LoadingController,
Platform
} from '@ionic/angular';
constructor(public platform: Platform, private loadingController: LoadingController) {}
async presentLoading() {
this.platform.backButton.subscribeWithPriority(10, () => {
document.addEventListener('backbutton', () => {}, false);
});
const loading = await this.loadingController.create({
spinner: 'circles',
keyboardClose: true,
message: 'Please Wait'
}).then((res) => {
res.onDidDismiss().then((d) => {
this.platform.backButton.observers.pop();
})
return res.present()
})
return loading;
}
【讨论】：