Ionic V5 后退按钮不会回到上一个答案

【问题标题】：Ionic V5 back buttons not going back to previousIonic V5 后退按钮不会回到上一个
【发布时间】：2021-04-05 15:35:39
【问题描述】：

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

我使用来自@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>

当我点击按钮时，我导航到 detailPage 并且有我的详细信息组件：

<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>

不是更好:(

【问题讨论】：

您是否可以检查是否由于 Angular 错误而没有导航回来（检查控制台）？您是否设置了任何 Guard 或 Resolve 阻止加载应用程序主页？
我没有任何 Angular 错误，也没有在路由器上设置任何防护（我用路由器代码编辑了我的帖子）

标签： angular ionic-framework

【解决方案1】：

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

所以习惯于向页面路由（组件没有模块文件）。这是一个非常好的性能技巧，也是推荐的方法。

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

Ion-router-outlet 是 Angular router-outlet 的包装器，它添加了一些动画和缓存这些页面的“奇怪行为”。当新组件加载到时，Angular 总是销毁前一个组件，而 Ionic（当使用时）将已经加载的页面保留在 DOM 中。这样做是为了在从一个页面移动到前一个页面时制作流畅的动画，它可以减少对服务器的请求数量，但代价是已经加载的页面（及其子组件）不会触发“ngOnInit”，因为它们已经在 DOM 中并且永远不会被破坏。

如前所述，Ionic 不会破坏页面，而是缓存它们，只是使用 CSS 技巧来“隐藏”和“显示”它们。所以如果你想强制刷新，你需要使用“ionViewWillEnter”和相关的朋友。否则您的页面将永远不会刷新。（通常在 ngOnInit 中调用服务来执行绑定到视图的请求）

【讨论】：

【解决方案2】：

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

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

【讨论】：