[英]ionic 4 navigateRoot() showing hardware back-button
I have a login page that will navigate the user to the home page when authentication is successful, to do this I use the navigateRoot()
method from the angular router.我有一个登录页面,可以在身份验证成功时将用户导航到主页,为此我使用了 angular 路由器中的
navigateRoot()
方法。
But when I do this, the hardware back-button still works and allows me to go back to the home page.但是当我这样做时,硬件后退按钮仍然有效并允许我返回主页。
Am I doing something wrong, or is this a bug?我做错了什么,还是这是一个错误? Here is how the code used to navigate:
以下是用于导航的代码:
if (user) {
this.buttonDisabled = false;
this.loggingIn = false;
this.navCtrl.navigateRoot('/home');
}
This is how my routes are defined:这是我的路线定义的方式:
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './pages/home/home.module#HomePageModule',
},
{
path: 'list',
loadChildren: './pages/list/list.module#ListPageModule'
},
{
path: 'login',
loadChildren: './pages/login/login.module#LoginPageModule'
},
{ path: 'task', loadChildren: './pages/task/task.module#TaskPageModule' },
{ path: 'door', loadChildren: './pages/door/door.module#DoorPageModule' },
{ path: 'work', loadChildren: './pages/work/work.module#WorkPageModule' },
{ path: 'address-search', loadChildren: './modals/address-search/address-search.module#AddressSearchPageModule' },
{ path: 'parts-list', loadChildren: './modals/parts-list/parts-list.module#PartsListPageModule' }
];
Environment info:环境信息:
Ionic:
ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.6.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)
System:
ios-deploy : 1.9.4
ios-sim : 8.0.0
NodeJS : v12.9.0 (/usr/local/Cellar/node/12.9.0/bin/node)
npm : 6.11.2
OS : macOS
Xcode : Xcode 10.3 Build version 10G8
I hope I'm not the only one with this issue, it's driving me nuts.我希望我不是唯一一个遇到这个问题的人,它让我发疯。
Thanks in advance提前致谢
I ran into this issue exactly as you described.我完全按照你的描述遇到了这个问题。 In my app.component.html file, I was missing the
<ion-app>
wrapper around the <ion-router-outlet>
.在我的 app.component.html 文件中,我缺少
<ion-router-outlet>
周围的<ion-router-outlet>
<ion-app>
包装器。 I put that in and it fixed it.我把它放进去,它修好了。
On your Home page Handle Hardware Back button like this to Close the Application:在您的主页上,像这样处理硬件后退按钮以关闭应用程序:
Eg例如
ionViewDidEnter(){
this.subscription = this.platform.backButton.subscribe(()=>{
navigator['app'].exitApp();
});
}
ionViewWillLeave(){
this.subscription.unsubscribe();
}
Edit: If this will not work do like this:编辑:如果这不起作用,请这样做:
this.platform.backButton.subscribeWithPriority(1, () => {
//on or the other will work depending on hardware
navigator['app'].exitApp();
});
This will Close your application on home page.这将在主页上关闭您的应用程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.