要使用Angular 8的模块路由,需要完成以下步骤:
首先,确保已经安装了Angular CLI并创建了一个新的Angular项目。
在项目的根目录下,打开命令行终端并运行以下命令以创建一个新的模块:
ng generate module moduleName --routing
这将生成一个新的模块,并自动为该模块创建一个路由模块。
打开新生成的模块文件(moduleName.module.ts),在文件中导入所需的模块和组件,并配置路由。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
declarations: [HomeComponent, AboutComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class ModuleNameModule { }
在此示例中,我们定义了两个路由:一个用于根路径(''),另一个用于/about路径。
打开应用的根路由文件(app-routing.module.ts),导入新创建的模块,并配置主路由。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: () => import('./module-name/module-name.module').then(m => m.ModuleNameModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在此示例中,我们将主路由配置为加载新创建的模块(moduleName.module)。
最后,在应用的根模块(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';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
bootstrap: [AppComponent]
})
export class AppModule { }
在此示例中,我们将主路由模块(AppRoutingModule)导入到根模块中。
完成上述步骤后,您已经成功创建了一个包含路由的Angular 8模块。您可以根据需要继续添加更多的模块和路由。