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

Question

在我的应用程序中，我使用ion-back-view，并且注意到后退按钮始终返回到“ root”页面（已加载的第一页），因此在对代码进行调查之后，我看到router.navigate始终将view设置为first。视图。

这些是来自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

Answer 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' }]}
    ]
  }];

Answer 2

对于临时的解决方法，您可以使用NavController并在ion-back-button元素中执行（click）=“ navCtrl.back（）”。

Answer 3

有一个公开的错误描述了ion-back button 。 我认为这是因为ion-back-button仅使用main-IonRouterOutlet ，而不是还检查了选项卡-IonRouterOutlet 。 这意味着main- IonRouterOutlet内部的StackController仅知道tabs模块的路由（例如“ tabs”）。

请参阅我的Ionic 4 演示项目，其中有关于ion-back-button的修复和解决方法。

该演示展示了两种方法，如何从“选项卡式页面”导航到“全局页面”，然后又返回， 而不会丢失选项卡状态 。

我的自定义ion-back-button-tabs组件直接访问了上面说明的问题（也显示在demo中 ）。 ion-back-button-tabs在内部使用ion-back-button buttons，但是，还会另外检查是否导航到“选项卡式页面” ，如果是，则确定最后一个活动的选项卡路线。