时间戳

首页 > 解决方案 > 离子离子返回按钮仅导航到 defaultHref

angular - 离子离子返回按钮仅导航到 defaultHref

问题描述

我ion-back-button在 Ionic v5 下使用电容器和 Angular 时遇到问题。
我正在尝试实现以下目标： Tab1 有一个导航到 Tab2 的按钮。
Tab2 中有一个ion-back-button应该tool-bar导航回上一页（在这种情况下Tab1）（在其他情况下例如到Tab3）。否则回退到默认值TabHome。

我正在Tab2通过该navCtrl.navigateForward(/tabs/tab2)方法进行路由。
我还尝试使用默认的角度路由器方法router.navigateByUrl('/tabs/tab2')。

当我不设置defaultHref属性时，ion-back-button它不会显示。如果我设置它，它总是路由回defaultHrefurl，而不是前一个选项卡Tab1。

我以这种方式使用延迟加载：

routes: Routes = [
{
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab3',
        loadChildren: () => import('./home/home.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab1',
        loadChildren: () => import('./favorites/favorites.module').then( m => m.Tab1PageModule)
      },
      {
        path: 'tab2/:id',
        loadChildren: () => import('./listing/listing.module').then( m => m.Tab2PageModule)
      }
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/tab3',
    pathMatch: 'full'
  },
]

标签： angularionic-frameworkangular-router

解决方案

不知道你现在是否已经解决了你的问题。但是，在另一个可能有帮助的 StackOverflow 问题上发现了这一点。 Ionic 4 Angular Back Button到上一页而不是root？

无论如何，这是行不通的。我有点需要用电容器插件做一些类似但有点不同的事情。所以，我所做的就是用下面的代码封装。

<a role="button" (click)="yourmethod()">
  <ion-back-button 
    mode="md" 
    class="icon-Arrow-Left-blah fontsize-blah">
  </ion-back-button>
</a>

并在我的方法中进行了适当的路由。为我工作。我不能把这种方法归功于自己，但找不到我遇到这个想法的问题。但是，肯定学会了如何实现它。只是传递知识，希望它对将来的其他人有所帮助（包括你自己，如果你还没有解决它）。

推荐阅读