Ionic 4、Angular Navigation 和 Android 后退按钮答案

【问题标题】：Ionic 4, Angular Navigation and Android Back ButtonIonic 4、Angular Navigation 和 Android 后退按钮
【发布时间】：2019-06-14 02:15:36
【问题描述】：

如何实现 Ionic 4/Angular 导航，以使用户无法通过应用程序的整个体验（屏幕）向后导航？

我已将我的 Ionic 2 应用程序移植到 Ionic 4，并且感觉失去了一些关键的导航功能。

具体来说：当用户在应用程序中向前移动，并在我的应用程序的不同区域中跳转时，他们现在可以使用 Android 后退按钮来向后浏览他们之前屏幕的完整历史记录。而以前，一旦用户点击根页面，Ionic 就会阻止它们向后移动。

例如，用户将从欢迎页面导航到主产品页面，然后到产品详细信息页面，然后到订单主页面，然后是订单详细信息页面。然后，如果他们开始使用 Android 后退按钮，他们就可以浏览整个屏幕历史记录，一直返回到欢迎页面。

以前，它们将被强制停止在最后一个根/主页面（例如订单页面）。

我认为我不必使用任何特定于应用程序的逻辑来在主页上动态禁用 Android。我认为 Ionic 框架的早期版本足够聪明，不会退步太多。

如何实现 Ionic 4/Angular 导航，以使用户无法通过应用程序的整个体验（屏幕）向后导航？

我了解 ionic 4 使用 angular 的路由。

我不是要求禁用 Android 后退按钮。

【问题讨论】：

我遇到了同样的问题。我的 app.component.ts 文件中有以下功能，但它不起作用。也许我走在正确的轨道上，有人可以告诉我如何调整它以使其工作。
androidBackButton() { this.platform.backButton.subscribe(() => { let url = this.router.url; switch (url) { case '/map': this.openPage(' /tabs/home'); break; case '/events': this.openPage('/tabs/home'); break; case '/staff': this.openPage('/tabs/home'); break; } }); }

标签： ionic-framework ionic2 angular-ui-router ionic3 ionic4

【解决方案1】：

这是一个对我有用的更简单的解决方案。本质上，当您要导航到根页面时，您只需要告诉 ionic/angular，然后它就会停止返回按钮带您过去。

import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';

...

constructor(private navCtrl: NavController, private router: Router) { }

...

this.navCtrl.setDirection('root');
this.router.navigateByUrl('/new-root-page');

【讨论】：

【解决方案2】：

在 ionic v4 中这似乎工作正常：

在 app.component.ts 里面的 initializeApp() 函数中添加以下内容：

initializeApp() {
    this.platform.ready().then(() => {
      this.platform.backButton.subscribeWithPriority(9999, () => {
        document.addEventListener('backbutton', function (event) {
          event.preventDefault();
          event.stopPropagation();
          console.log('hello');
        }, false);
      });
      // here put instructions for splashScreen, statusBar, etc.
    });
  }

【讨论】：