angular_routing

Angular Routing 是 Angular 应用程序中一个非常重要的概念，它允许开发者创建复杂的单页面应用程序（SPA）。下面是一些关于 Angular Routing 的基础知识。

基本概念

Angular Router 是 Angular 的一个内置模块，它负责处理应用程序中的路由。路由定义了应用程序中的不同页面（组件）以及如何在不同页面之间导航。

路由配置

在 Angular 应用程序中，路由通常在 app-routing.module.ts 文件中进行配置。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // 更多路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

导航

在 Angular 应用程序中，可以通过编程方式或模板语法来导航到不同的路由。

this.router.navigate(['/about']);

或者，在 HTML 模板中使用 <router-link> 指令：

<a routerLink="/about">About</a>

动态路由参数

Angular 路由支持动态路由参数，这允许应用程序根据 URL 参数渲染不同的组件。

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

@NgModule({
  // ...
})
export class AppRoutingModule { }

在这个例子中，user/:id 路径将匹配任何以 /user/ 开头并跟有一个数字的路由。

导航守卫

Angular 提供了导航守卫，允许开发者控制路由的访问权限。

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 检查用户是否已认证
    return true; // 或者返回 false 来阻止导航
  }
}

在路由配置中使用守卫：

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

更多关于 Angular Routing 的信息，请访问 Angular 官方文档。

Angular Routing Diagram