Ionic 4 / Angular 6：タブ内のネストされた子ルート

Question

Ionic Tabs Componentを使用してアプリを生成しました。

タブはDeliveries、AboutおよびContact。

次に、ページDetailsを生成しました。

ページDetailsをDeliveriesタブの子にしたい。

detailsページを開いているときの意味は、配信 タブ。

誰かが同様の質問をしました Ionic Forum

生成されるディレクトリ構造：

- about
- contact
- deliveries
    deliveries.module.ts
- details
    details.module.ts
- tabs
    tabs.module.ts
    tabs.page.html
    tabs.router.module.ts
app.module.ts
app-routing.module.ts

これは生成されたapp-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

これは生成されたtabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { DeliveriesPage } from '../deliveries/deliveries.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(deliveries:deliveries)',
        pathMatch: 'full',
      },
      {
        path: 'deliveries',
        outlet: 'deliveries',
        component: DeliveriesPage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(deliveries:deliveries)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

これは生成されたtabs.page.html

<ion-tabs>
  <ion-tab label="Deliveries" icon="bicycle" href="/tabs/(deliveries:deliveries)">
    <ion-router-outlet name="deliveries"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

これは生成されたdeliveries.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { DeliveriesPage } from './deliveries.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([
      {
        path: '',
        component: DeliveriesPage
      }
    ])
  ],
  declarations: [
    DeliveriesPage
  ]
})
export class DeliveriesPageModule {}

これはdetails.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { DetailsPage } from './details.page';

const routes: Routes = [
  {
    path: '',
    component: DetailsPage,
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [DetailsPage]
})
export class DetailsPageModule {}

だから、私の試みはすべて失敗しました、私は上記と同じロジックに従うことを試みました。

deliveries.module.tsで作業しようとしました

RouterModule.forChild([
  {
    path: '',
    component: DeliveriesPage,
  },
  {
    path: 'details',
    loadChildren: '../details/details.module#DetailsPageModule'
  }
]),

私も試しました

RouterModule.forChild([
  {
    path: '',
    component: DeliveriesPage,
  },
  {
    path: 'details',
    outlet: 'deliveries
    loadChildren: '../details/details.module#DetailsPageModule'
  }
]),

または

RouterModule.forChild([
  {
    path: '',
    component: DeliveriesPage,
    children: [
      {
        path: 'details',
        loadChildren: '../details/details.module#DetailsPageModule'
      }
    ]
  },
]),

から詳細ページにアクセスする方法が見つかりません

• / tabs /（deliveries：deliveries）/ details
• / tabs /（deliveries：details）

それを達成することは可能ですか？少し混乱します。

detailsページにアクセスする簡単な方法は、app-routing.module.tsですが、同じルーターコンセントの一部ではありません。

Answer 1

4.0.0-beta.18 を使用すると、ion-tabが削除され、名前付きアウトレットを使用する必要がなくなりました。

Demo（2つの異なるアプローチ）+説明：
https://github.com/servrox/demo-ionic-tab-routing

Ionic CLIバージョン4.10.3
Ionic Framework @ ionic/angular4.0.1

Answer 2

これはすべて私にとって非常に混乱しているように見えました。その後、私はタブルーティングでやらなければならないことがすべてであることに気づきました。

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '',
    component: TabsPage,
    children: [
      { path: 'tab1', loadChildren: '../tab1/tab1.module#tab1Module'},
      { path: 'tab2', 
        children: [
          { path: '', loadChildren: '../tab2/tab2.module#tab2Module'},
          { path: ':ID', loadChildren: '../tab2/tab2details.module#tab2detailsModule'},
        ]
      },
    ]
  },
];

Tab2にはリストページと詳細ページがあります。

リストページのURL：/ tabs/tab2

詳細ページのURL：/ tabs/tab2/123 /

Tab2タブは、リストまたは詳細ページにいるときはアクティブのままで、詳細ページにいるときは戻るボタンが表示されます。

Answer 3

これは私がやった方法です。 tabs.router.module.tsでは、

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'featured',
        children: [
          {
            path: '',
            loadChildren: '../tab-featured/tab-featured.module#TabFeaturedPageModule'
          }
        ]
      },
      {
        path: 'featured/:id',
        children: [
          {
            path: '',
            loadChildren: '../tab-featured-detail/tab-featured-detail.module#TabFeaturedDetailPageModule'
          }
        ]
      },
      {
        path: 'categories',
        children: [
          {
            path: '',
            loadChildren: '../tab-category/tab-category.module#TabCategoryPageModule'
          }
        ]
      },
      {
        path: 'popular',
        children: [
          {
            path: '',
            loadChildren: '../tab-popular/tab-popular.module#TabPopularPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/featured',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/featured',
    pathMatch: 'full'
  }
];

tab-featured-detail.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabFeaturedDetailPage } from './tab-featured-detail.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: TabFeaturedDetailPage }])
  ],
  declarations: [TabFeaturedDetailPage]
})
export class TabFeaturedDetailPageModule {}

Answer 4

これが、これまでに見つけた最もクリーンな方法です。

ここにtabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { DeliveriesPage } from '../deliveries/deliveries.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';
import { DetailsPage } from '../details/details.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(deliveries:deliveries)',
        pathMatch: 'full',
      },
      {
        path: 'deliveries',
        outlet: 'deliveries',
        component: DeliveriesPage,
      },
      {
        path: 'details/:id',
        outlet: 'deliveries',
        component: DetailsPage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(deliveries:deliveries)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

DetailsModulePageをtabs.module.tsにインポートします

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { TabsPageRoutingModule } from './tabs.router.module';

import { TabsPage } from './tabs.page';
import { ContactPageModule } from '../contact/contact.module';
import { AboutPageModule } from '../about/about.module';
import { DeliveriesPageModule } from '../deliveries/deliveries.module';
import { DetailsPageModule } from '../details/details.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
    DeliveriesPageModule,
    AboutPageModule,
    ContactPageModule,
    DetailsPageModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

ここにDetailsModulePage（かなり基本的な）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { DetailsPage } from './details.page';

const routes: Routes = [
  {
    path: '',
    component: DetailsPage,
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [DetailsPage]
})
export class DetailsPageModule {}

そして、これはDetailsPageにアクセスする方法です

• / tabs /（deliveries：details/2）

それを行うより良い方法があれば、私はそれを知って幸せになります。