Ionic V5后退按钮不返回到上一个

Question

我正在设置一个具有多个页面的离子应用程序。

我使用@angular/router中的RouterModule进行导航。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DetailComponent } from './detail/detail.component';
const routes: Routes = [
{
path: "home",
loadChildren: () =>
import("./home/home.module").then((m) => m.HomePageModule),
},
{
path: "",
redirectTo: "home",
pathMatch: "full",
},
{
path: "detail", component: DetailComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }

在主页上，我得到了这个：

<ion-col size="2" class="ion-align-self-end">
<button type="submit" class="btn btn-primary" [routerLink]="['/detail']">Go</button>
</ion-col>

当我点击按钮时，我导航到详细信息页面，那里有我的详细信息组件：

<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button ></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen class="ion-padding">
<p>Back-Button is displayed when there is history</p>
</ion-content>

会显示后退按钮箭头，但当我单击它时，不会发生任何事情在检查员那里，我得到了离子路由器的出口，看起来还可以

<ion-router-outlet>
<app-home>
<app-detail>
</ion-router-outlet>

我也尝试过使用这个：

<ion-back-button defaultHref="/"></ion-back-button>

并非更好：(

Answer 1

Ionic默认使用LazyLoading，也就是说，当访问路由时，下载路径指向的模块。

因此，要习惯于路由到页面(组件没有模块文件(。这是一个非常好的表演技巧和推荐的方式。

由于模块定义了它们的组件依赖项，因此延迟加载有助于不加载不需要的依赖项，从而加快Angular的服务速度。

Ion路由器出口是Angular路由器出口的包装，它添加了一些动画和缓存这些页面的"奇怪行为"。而Angular在<路由器出口>，Ionic(当使用<ion router outlet>时(在DOM中保留已加载的页面。这样做是为了在从一个页面移动到上一个页面时制作平滑的动画，它可以减少向服务器的请求数量，但代价是已经加载的页面(及其子组件(不会触发"ngOnInit"，因为它们已经在DOM中，并且永远不会被销毁。

正如所说，Ionic不会破坏页面，而是缓存它们，只是使用CSS技巧来"隐藏"one_answers"显示"它们。因此，如果你想强制刷新，你需要使用"ionViewWillEnter"和相关的朋友。否则，您的页面将永远不会刷新。(通常在ngOnInit中，对服务的调用是为了执行绑定到视图的请求(

Answer 2

我尝试使用页面而不仅仅是组件(使用ionic CLI(，效果很好。我还不知道为什么，生成页面也生成了类似的路由路径

{
path: 'detail',
loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
}