Question

在我的应用程序中，我使用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

Answer 1

将我们的PWA之一从Ionic 3迁移到Ionic 4之后，我发现路由已完全更改，您确实需要以角度的方式来思考，而不是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

有一个开放的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，但是，还会另外检查是否导航到“标签页” ，如果是，则确定最后一个活动的标签路线。

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

3 个答案: