使用Angular Router在零部件中加载零部件

Question

我正在使用Ionic框架工作(v5(并实现Angular Router来加载具有以下结构的应用程序。

应用

- Tabs
-- Tab 1
-- Tab 2
-- Tab 3

这是一个样板模板，您可以选择为您设置Ionic。因此，使用下面的Angular Router设置可以正确地进行导航。

app.module.ts

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, BrowserAnimationsModule],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } //     { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts

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

选项卡模块.ts

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

选项卡-路由模块.ts

const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () =>
import('../tab1/tab1.module').then(m => m.Tab1PageModule)
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: () =>
import('../tab2/tab2.module').then(m => m.Tab2PageModule)
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: () =>
import('../tab3/tab3.module').then(m => m.Tab3PageModule)
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}

我想做的是在每个选项卡中引入一个辅助菜单，该菜单使用类似于"材质选项卡"的导航系统https://material.io/components/tabs#.每个选项卡将内联加载一个不同的组件。因此，选项卡1将保持活动状态，并继续允许用户在部分1、2或3之间进行选项卡。

应用

- Tabs
-- Tab 1
--- Section 1
--- Section 2
--- Section 3
-- Tab 2
--- Section 1
--- Section 2
--- Section 3
-- Tab 3
--- Section 1
--- Section 2
--- Section 3

这就是我目前对的了解

表1.模块.ts

@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: Tab1Page }]),
MaterialModule,
Tab1PageRoutingModule
],
declarations: [Tab1Page]
})
export class Tab1PageModule {}

表1-路由模块.ts

const routes: Routes = [
{
path: 'tab1',
component: Tab1Page,
children: [
{
path: 'section1',
children: [
{
path: '',
loadChildren: () =>
import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
}
]             
},
{
path: 'section2',
children: [
{
path: '',
loadChildren: () =>
import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
}
]     
},
{
path: 'section3',
children: [
{
path: '',
loadChildren: () =>
import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
}
]     
},
{
path: '',
redirectTo: '/tabs/tab1/section1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1/section1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Tab1PageRoutingModule {}

但当我试图从/tabs/tab1路线导航到/section1时，它会显示错误消息

Error: Cannot match any routes. URL Segment: 'section1'

Answer 1

您在tabs-routing.module.ts和tab1-routing.modules.ts中已经有了一个tab1路由，您再次声明了一个带有section1子级的tab1路由。所以现在你真正拥有的是tabs/tab1/tab1/section1。然后在选项卡1-routing.module.ts中，您将从''重定向到不存在的/tabs/tab1/section1。您需要将tab1-routing.module.ts中的''路由重定向更改为：

{
path: '',
redirectTo: '/tabs/tab1/tab1/section1',
pathMatch: 'full'
}

还要注意，在tab1.module.ts中，您正在导入两个路由器模块。这可能会导致一些奇怪的结果。

@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: Tab1Page }]), //<- here
MaterialModule,
Tab1PageRoutingModule // <- and here
],
declarations: [Tab1Page]
})
export class Tab1PageModule {}