下面是一个使用Angular 9的路由器导航的代码示例:
首先,确保你已经安装了Angular CLI并创建了一个新的Angular项目。
在你的项目根目录中,打开终端并运行以下命令来添加Angular路由器模块:
ng generate module app-routing --flat --module=app
app-routing.module.ts
文件并导入所需的依赖项:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
];
imports
数组中:@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
文件),导入AppRoutingModule
模块:import { AppRoutingModule } from './app-routing.module';
AppRoutingModule
模块添加到imports
数组中:@NgModule({
imports: [
AppRoutingModule,
// 其他模块
],
// 其他配置
})
export class AppModule { }
routerLink
指令来导航到不同的路由:
ng generate component home
ng generate component about
ng generate component contact
这些步骤将帮助你在Angular 9中实现路由器导航。你可以根据自己的需求进行调整和扩展。