Перейдите к индексу вкладок с помощью ionic 4

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 с макетом на основе вкладок и обходными путями для ion-back-button.

Демонстрация показывает два способа как перейти от 'страница с вкладками' на 'глобальная страница' и обратно без потери состояний табуляции .

Правильно, что ion-back-button необходимо исправить, я думаю, это потому, что ion-back-button использует только main-IonRouterOutlet вместо проверки tabs-IonRouterOutlet .Это означает, что StackController внутри main-IonRouterOutlet знает только маршрут модуля вкладок (например, 'tabs').

Мой пользовательский ion-компонент back-button-tabs , напрямую обращающийся к описанной выше проблеме (также показан в demo ).ion-back-button-tabs использует ion-back-button для внутреннего использования, однако дополнительно проверяется, следует ли перейти на «страницу с вкладками» и, если это так, определяется последний активный маршрут вкладки.

Answer 2

удалите маршрутизацию страницы из 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'
    }
];

вы можете вызвать страницу с подробной информацией о заданиях следующим образом:

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>

Answer 3

В Ionic 4 ионная кнопка возврата с видом вкладки содержит ошибки, которые необходимо исправить. https://github.com/ionic-team/ionic/issues/15216