如何实现Ionic 4/Angular导航,使用户无法在应用程序上的整个体验(屏幕)中向后导航?
我已经将我的Ionic 2应用程序移植到Ionic 4,感觉我失去了一些关键的导航功能。
具体来说:当用户在应用程序中向前移动,并在我的应用程序的不同区域来回移动时,他们现在可以使用Android的后退按钮在以前屏幕的完整历史中向后导航。而之前的Ionic会在用户点击根页面后阻止它们向后移动。
例如,用户将从主欢迎页面导航到主产品页面,然后导航到产品详细信息页面,再导航到主订单页面,然后再导航到订单详细信息页面。然后,如果他们开始使用Android后退按钮,他们就可以浏览整个屏幕历史,一直导航到欢迎页面。
以前,它们会在最后一个root/main页面(例如Orders页面)强制停止。
我不认为我必须使用任何特定于应用程序的逻辑来动态禁用主页上的Android。我认为以前版本的Ionic框架足够聪明,不会倒退太远。
如何实现Ionic 4/Angular导航,使用户无法在应用程序上的整个体验(屏幕)中向后导航?
我知道离子4使用angular的路由。
我不是要求禁用Android后退按钮。
这是一个简单得多的解决方案,一直在为我工作。本质上,你只需要告诉离子/角度,当你要导航到一个根页面,然后它会停止后退按钮带你通过它。
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 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.
});
}