- 在app.module.ts中导入RouterModule和Routes:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
// 添加路由路径和组件
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppModule { }
- 在app.component.html中添加标签:
- 配置路由路径和组件:
import { Component } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
- 在导航栏中添加链接:
- 在组件中使用路由导航:
import { Router } from '@angular/router';
export class HomeComponent {
constructor(private router: Router) { }
navigateToAbout() {
this.router.navigate(['/about']);
}
}