Ionic 4 / Angular 6: вложенные дочерние маршруты во вкладках

С 4.0.0-beta. 18 ion-tab был удален, и теперь нет необходимости использовать именованные розетки.

Демо (с двумя разными подходами) + Объяснение:
https://github.com/servrox/demo-ionic-tab-routing

Ionic CLI версии 4.10.3
Ionic Framework @ ionic / angular 4.0.1

Мне все это казалось крайне запутанным. Затем я понял, что все, что мне нужно было сделать в маршрутизации вкладок, - это.

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 остается активной, когда вы находитесь на странице списка или сведений, а кнопка «Назад» отображается, когда вы находитесь на странице сведений.

Так я и поступил. В 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 {}

Так что это самый чистый способ, который я нашел до сих пор.

Здесь 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 / (поставки: подробности / 2)

Если у вас есть лучший способ сделать это, я буду счастлив узнать это.