要在Angular 7中创建嵌套模块路由,可以按照以下步骤进行操作:
创建父模块和子模块:
在父模块中定义路由:
在父模块的路由配置文件(parent-module-routing.module.ts)中,导入子模块并定义子模块的路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildModule } from '../child-module/child-module.module';
const routes: Routes = [
{ path: '', loadChildren: () => ChildModule }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentModuleRoutingModule { }
在子模块中定义路由:
在子模块的路由配置文件(child-module-routing.module.ts)中,定义子模块的路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildComponent } from './child.component';
const routes: Routes = [
{ path: '', component: ChildComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ChildModuleRoutingModule { }
在父模块和子模块中定义组件:
在父模块和子模块中导入路由模块:
在父模块(parent-module.module.ts)中导入父模块的路由模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParentComponent } from './parent.component';
import { ParentModuleRoutingModule } from './parent-module-routing.module';
@NgModule({
declarations: [ParentComponent],
imports: [
CommonModule,
ParentModuleRoutingModule
]
})
export class ParentModule { }
在子模块(child-module.module.ts)中导入子模块的路由模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildComponent } from './child.component';
import { ChildModuleRoutingModule } from './child-module-routing.module';
@NgModule({
declarations: [ChildComponent],
imports: [
CommonModule,
ChildModuleRoutingModule
]
})
export class ChildModule { }
在根模块中配置路由:
在根模块(app.module.ts)中导入父模块的路由模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ParentModule } from './parent-module/parent-module.module';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
ParentModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,你就可以在父组件的模板中使用
来显示子组件了。在父组件的路由路径中,可以使用子组件的路径进行导航。
希望这个解决方案能帮到你!