ionic 4防止/禁用设备硬件后退按钮

lvmkulzt  于 12个月前  发布在  Ionic
关注(0)|答案(7)|浏览(175)

我使用角路由(@angular/路由器)为离子4项目禁用设备后退按钮离子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);
        }
      });
    });

字符串
我无法禁用设备后退按钮在这里任何帮助

mjqavswn

mjqavswn1#

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();
    });
  }

字符串

pvabu6sv

pvabu6sv2#

更新

backButton侦听器已经转移到RxJS observables哲学,所以现在它做得有点不同:

const backButtonSubscription = this.platform.backButton
        .subscribeWithPriority(9999, () => {
              // Do my stuff on back button tap
        }));

...

// Now I want to return back button to previous state
backButtonSubscription.unsubscribe();

字符串
也许你想让backButtonSubscription成为你的类的一个属性,这样你就可以在其他类函数中访问它。

原创

我发现了如何撤销它(给予返回按钮以前的功能):
你的观察者被推到this.platform.backButton.observers数组。所以你只需要弹出列表的最后一个元素:

this.platform.backButton.observers.pop();


希望能帮上忙。

bq9c1y66

bq9c1y663#

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
    });

  }

字符串

xjreopfe

xjreopfe4#

你可以实现禁用硬件返回按钮为特定的网页。使用下面的代码在离子4。

ionViewDidEnter() {
    this.backbutton = this.platform.backButton.observers.pop();
  }

  ionViewWillLeave() {
    this.platform.backButton.observers.push(this.backbutton);
  }

字符串

pb3s4cty

pb3s4cty5#

我找到了更好的方法来避免返回按钮设备,并使禁用回任何网页上你想要的

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);
  }
}

字符串

0lvr5msh

0lvr5msh6#

可能需要提到使用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');
});

vx6bjr1n

vx6bjr1n7#

在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;
}

字符串

相关问题