Question

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

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

特别是：当用户在应用程序中前进并在应用程序的不同区域弹跳时，他们现在可以使用Android后退按钮在其以前的屏幕的完整历史记录中向后导航。以前，一旦用户点击了根页面，Ionic将阻止它们向后移动。

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

以前，它们会被强制停止在最后一个根目录/主页（例如“订单”页面）上。

我认为我不必使用任何特定于应用程序的逻辑来动态禁用Android回到主页上。我认为以前版本的Ionic框架足够聪明，可以避免倒退太远。

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

我了解离子4使用角的路由。

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

Answer 1

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

在initializeApp（）函数内的app.component.ts中添加以下内容：

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

Answer 2

这对我来说一直是一个简单得多的解决方案。本质上，您只需要在要导航到根页面时告诉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');

Ionic 4，角度导航和Android后退按钮

2 个答案: