以下是一个使用 Angular 10 的 RouterModule 的示例:
首先,确保你已经安装了 @angular/router 包。可以使用以下命令进行安装:
npm install @angular/router
接下来,在你的模块文件中导入 RouterModule 和 Routes:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
然后,定义你的路由配置。你可以在 Routes 数组中定义多个路由:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
];
在上面的例子中,我们定义了三个路由。对于空路径,我们将加载 HomeComponent 组件。对于路径 'about',我们将加载 AboutComponent 组件。对于路径 'contact',我们将加载 ContactComponent 组件。
接下来,在 @NgModule 的 imports 数组中导入 RouterModule,并使用 forRoot() 方法来配置路由:
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,将 AppRoutingModule 导入到你的应用的根模块中:
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],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,你就可以在你的应用中使用路由了。你可以在模板中使用 routerLink 指令来导航到不同的组件:
你还可以使用 router-outlet 组件来显示加载的组件:
这是一个基本的使用 RouterModule 的示例。你可以根据你的需求进行更复杂的路由配置。