web-dev-qa-db-ja.com

ionic 4でタブインデックスに戻ります

5つのタブがあるタブレイアウトがあります。 2番目のタブに移動してからサブページに移動すると、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>
angularionic-frameworkionic4
4
olivier

Ionic 4、タブビューのion-back-buttonには、修正が必要なバグが含まれています。 https://github.com/ionic-team/ionic/issues/15216

4
Suresh Kumar Ariya

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>
2
Mohammad Reza Mrg

ion-back-buttonのタブベースのレイアウトと回避策を使用してIonic 4 デモプロジェクト を作成しました。

デモは 2つの方法「タブ付きページ」から「グローバルページ」に移動する方法を示しています）そして戻って、タブ状態を失うことなく。

ion-back-buttonを修正する必要があるのは正しいです。これは、ion-back-buttonがmain-IonRouterOutletのみを使用し、tabs-IonRouterOutlet。つまり、main-IonRouterOutlet内のStackControllerは、tabsモジュール（例： 'tabs'）のルートのみを認識します。

私のカスタム ion-back-button-tabs コンポーネントは上記で説明した問題に直接アクセスします（ デモ にも示されています）。 ion-back-button-tabsは内部でion-back-buttonを使用しますが、「タブ付きページ」に移動するかどうかもチェックされます。移動する場合、最後のアクティブなタブルートは決定。

0
servrox