web-dev-qa-db-ja.com

ionic 4デバイスハードウェアの戻るボタンを防止/無効化

angular 4プロジェクトでionic routing（@ angular/router）を使用してionicのデバイスの戻るボタンを無効にしています。4prevent-defaultが機能していない

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

ここでデバイスの戻るボタンを無効にすることはできません

angulartypescriptionic-frameworkionic4angular-router
3
Mohan Gopi
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();
    });
  }
10
Davide Martina

私はそれを元に戻す方法を見つけました（前の機能に戻るボタンを与える）：

オブザーバーはthis.platform.backButton.observers配列にプッシュされます。したがって、リストの最後の要素をポップする必要があります。

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

それが誰かを助けることを願っています。

2
elnezah

私は戻るボタンデバイスを避けて、あなたが望むどんなページでも無効に戻すより良い方法を見つけました

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);
  }
}
0
Anang Kurendi

5-02-202

これは私にとってはうまくいきます。

app.component.ts

async initializeApp(): Promise<void> {
    await this.platform.ready();
   
    this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
    });

  }
0
Sampath