ionic 4 ion-back-button 总是返回到“root”页面答案

【问题标题】：ionic 4 ion-back-button is always return to "root" pageionic 4 ion-back-button 总是返回到“root”页面
【发布时间】：2018-12-26 10:51:14
【问题描述】：

在我的应用程序中，我使用了 ion-back-view，我注意到后退按钮总是返回到“根”页面（加载的第一页），所以在调查代码后，我看到 router.navigate 总是设置作为第一个视图查看。

这些是来自 stack-controller.ts 的代码

 StackController.prototype.insertView = function (enteringView, direction) {
        // no stack
        if (!this.stack) {
            this.views = [enteringView];
            return;
        }
        // stack setRoot
        if (direction === 0) {
            this.views = [enteringView];
            return;
        }
        // stack
        var index = this.views.indexOf(enteringView);
        if (index >= 0) {
            this.views = this.views.slice(0, index + 1);
        }
        else {
            if (direction === 1) {
                this.views.push(enteringView);
            }
            else {
                this.views = [enteringView];
            }
        }
    };

这里每个视图都设置为第一个视图，而不是添加到堆栈中，

 if (direction === 0) {
            this.views = [enteringView];
            return;
        }

那么如何从代码而不是 html (routerDirection) 向堆栈添加视图？ https://forum.ionicframework.com/t/ionic-v4-routing-and-root/135439/3

【问题讨论】：

您正在创建自定义导航视图数组？
我正在尝试使用 NavController 而不是 this.router.navigate(['test]);我正在尝试使用 this.navCtrl.navigateForward(['test']);但我认为 (navCtrl) 已被弃用，我面临其他问题，当前进并返回并需要再次前进时，它不起作用。 @PareshGami
@PareshGami 不，我不创建自定义导航视图数组。
是的！在 ionic 4 中不推荐使用 navCtrl。只需要与路由器一起玩。！
@PareshGami 但我注意到 navController 构建在路由器 NavController.prototype.navigateForward = function (url, animated, extras) { this.setIntent(1 /* Forward */, animated); if (Array.isArray(url)) { return this.router.navigate(url, extras); } else { 返回 this.router.navigateByUrl(url, extras); } };

标签： angular ionic-framework ionic3

【解决方案1】：

在将我们的一个 PWA 从 Ionic 3 迁移到 Ionic 4 之后，我发现路由已经完全改变，你真的需要以 Angular 的方式而不是 Ionic 3 来思考。

每次导航（前进和后退）都会触发路由器生命周期，这意味着如果您有任何守卫、重定向规则，它将被调用。

示例：

假设您有 3 个选项卡“主页”、“通知”和“更多”。加载应用程序时，您需要用户查看home 选项卡。 notification 选项卡包含许多通知，您可以通过单击它来导航到详细信息。同时，您还想从home 选项卡导航到通知详细信息之一。

app.routing.ts中的路由

const routes: Routes = [
  { path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsModule' },
  {
    path: 'notification/:id',
    loadChildren: './pages/notification/notification-detail/notification-detail.module#NotificationDetailPageModule'
  },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: '**', pathMatch: 'full', redirectTo: 'tabs/home' }
];

提示：

如果你想留在你之前离开的每个标签，不要在tabs.routing.ts中添加空重定向规则。
如果要在子页面中隐藏标签栏，请不要在tabs路由下添加页面。

tabs.routing.ts中的路由

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      { path: 'home', children: [{ path: '', component: HomePage }]},
      { path: 'notification', children: [{ path: '', loadChildren: '../notification/notification-list/notification-list.module#NotificationListPageModule' }]},
      { path: 'more', children: [{ path: '', loadChildren: '../more/more-index/more-index.module#MoreIndexPageModule' }]}
    ]
  }];

【讨论】：

此自定义组件的 O(N) 似乎为 N^3。这似乎不太高效，每次回击时都会调用一个三重嵌套循环。这将如何扩展？
在实践中，这表现良好。因为在大多数情况下，您的应用中的标签页不会超过 5 个。

【解决方案2】：

对于临时解决方法，您可以使用 NavController 并在 ion-back-button 元素中执行 (click)="navCtrl.back()"。

【讨论】：

当您像这样导航回来时，您将失去标签内的状态。这是因为在内部，它使用 错误的 ion-back-button 逻辑（例如到 /tabs）导航回到您的 (click) 函数中指定的路线。请参阅我的 solutions 以在不丢失选项卡状态的情况下向后导航。

【解决方案3】：

有一个开放的bug 描述了ion-back button 的问题。我认为这是因为ion-back-button 仅使用main-IonRouterOutlet，而不是检查tabs-IonRouterOutlet。这意味着 main-IonRouterOutlet 内的 StackController 只知道 tabs 模块的路由（例如'tabs'）。

请参阅我的 Ionic 4 demo project，了解 ion-back-button 的修复和解决方法。

演示展示了two ways 如何在“标签页” 到“全局页” 之间导航并返回，不会丢失标签状态。

我的自定义ion-back-button-tabs 组件直接访问上面解释的问题（也显示在demo 中）。 ion-back-button-tabs 在内部使用 ion-back-button，但是，它还检查是否导航到 “标签页”，如果是，则确定最后一个活动的标签页路由。

【讨论】：