Question

我有5个标签的标签布局。当我导航到第二个选项卡然后到子页面时，使用ion-back-button导航回到第一个选项卡。如何返回上一个选定的标签？

任何帮助，不胜感激！

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'timetable', loadChildren: './timetable/timetable.module#TimetablePageModule' },
  { path: 'artistDetail/:id', loadChildren: './artist-detail/artist-detail.module#ArtistDetailPageModule' },
  { path: 'artist', loadChildren: './artist/artist.module#ArtistPageModule' },
];

标签路线：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'timetable',
        outlet: 'timetable',
        component: TimetablePage
      },
      {
        path: 'artist',
        outlet: 'artist',
        component: ArtistPage
      }

    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

标签

  <ion-tab label="Dashboard" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Zeitplan" icon="time" href="/tabs/(timetable:timetable)">
    <ion-router-outlet name="timetable"></ion-router-outlet>
  </ion-tab>
[...]

制表符页面，该页面导航到带有routerLink的选项卡的子页面

  <div class="venue-box animated fadeIn fast delay-500ms" *ngFor="let artist of data" routerLink="/artistDetail/{{artist.id}}" [ngStyle]="{'background-image': 'url(' + artist?.imagePath + ')'}">
    <div class="box">
      <h1>{{artist?.name}}</h1>
      <p>{{artist?.subtitle}}</p>
    </div>
  </div>

子页眉：

<ion-header>
  <ion-toolbar color="primary">
      <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
    <ion-title>{{artist}}</ion-title>
  </ion-toolbar>
</ion-header>

Answer 1

在Ionic 4中，带有选项卡视图的离子后退按钮包含需要修复的错误。 https://github.com/ionic-team/ionic/issues/15216

Answer 2

我创建了一个Ionic 4 demo project，它具有基于标签的布局和ion-back-button的解决方法。

该演示向two ways演示了如何从“标签页” 导航到“全局页” ，并返回而不会丢失标签-状态。

正确的ion-back-button需要修复，我认为这是因为ion-back-button仅使用 main-IonRouterOutlet ，而不是也检查了标签-IonRouterOutlet 。这意味着 main-IonRouterOutlet 中的 StackController 仅知道tabs模块的路由（例如'tabs'）。

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

Answer 3

从app-routing.module中删除页面路由，然后在tabs.router.module中添加该页面的路由像这样的东西：

const routes: Routes = [
{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'home',
      children: [
        {
          path: '',
          loadChildren: '../../pages/home/home.module#HomePageModule'
        }
      ]
    },
    {
      path: 'jobsRequest',
      children: [
        {
          path: '',
          loadChildren: '../../pages/Jobs/jobs-request/jobs-

request.module#JobsRequestPageModule'
            },
            {
              path: 'jobs-details',
              loadChildren: '../../pages/Jobs/jobs-details/jobs-details.module#JobsDetailsPageModule'
            }
          ]
        },
    {
      path: '',
      redirectTo: '/app/tabs/home',
      pathMatch: 'full'
    }
];

您可以像这样调用Jobs-details页面：

this.router.navigate(['/app/tabs/jobsRequest/jobs-details', { IsFavorite: this.IsFavorite }]);

以及从作业详细信息页面使用：

<ion-header>
  <ion-toolbar>
    <ion-title>jobs details</ion-title>
    <ion-buttons slot="end">
      <ion-back-button ></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

使用ionic 4导航回到标签索引

3 个答案: