在Angular 10中,如果你想要在不同模块的子路由之间进行导航,可以按照以下步骤进行:
首先,在Angular应用程序的根目录中创建一个新的模块,用于处理子路由的导航。例如,创建一个名为routing.module.ts
的文件。
在routing.module.ts
文件中,导入RouterModule
和Routes
:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
HomeModule
和AboutModule
,每个模块都有自己的子路由:const routes: Routes = [
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
{ path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];
RouterModule.forRoot()
方法,将路由配置数组传递给RouterModule
,并将其导出为一个新的模块:@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
)中导入和添加AppRoutingModule
模块:import { AppRoutingModule } from './routing.module';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
routerLink
指令来导航到不同模块的子路由。例如,在导航菜单中创建两个链接:Home
About
通过遵循以上步骤,你就可以在不同模块的子路由之间进行导航了。