Ionic 4/Angular 6:选项卡中的嵌套子路径

Question

我使用Ionic Tabs Component生成了一个应用程序.

标签是交货,关于和联系.

然后我生成了一个页面细节.

我希望页面详细信息成为" 交付"选项卡的子项.

当我在详细信息页面上时,我正在浏览交付选项卡.

有人在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 {}

所以,我的所有尝试都失败了,我试图遵循与上面相同的逻辑.

我试着在deliveryies.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'
      }
    ]
  },
]),

无法找到访问详细信息页面的方法

• /选项卡/(交货:交货)/细节
• /选项卡/(交货:细节)

是否有可能实现这一目标？这有点令人困惑.

现在访问详细信息页面的简单方法是在app-routing.module.ts中定义路由 ,但它不会是同一路由器插座的一部分.

Answer 1

在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

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 选项卡保持活动状态，当您在详细信息页面上时，后退按钮会显示。