Angular Routing Basic 简介

Angular 的路由（Routing）功能允许你为应用创建一个导航结构，使你能够轻松地在不同的视图组件之间切换。以下是关于 Angular 基础路由的一些基本概念。

路由配置

在 Angular 应用中，路由通常通过 AppModule 中的 RouterModule 进行配置。以下是一个基本的路由配置示例：

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

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

路由解析

Angular 使用 RouterModule 提供的路由解析器来解析 URL 路径。当用户访问 /about 路径时，Angular 会查找与该路径匹配的路由配置，并加载相应的组件。

动态路由参数

有时，你可能需要根据 URL 中的参数动态加载内容。例如，一个博客应用可能需要根据文章的 ID 来显示不同的文章。以下是一个使用动态路由参数的示例：

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

在这个例子中，id 是一个动态路由参数，它将作为属性传递给 PostComponent。

路由守卫

Angular 提供了路由守卫（Guard）机制，允许你在路由导航之前执行逻辑，例如检查用户权限。以下是一个简单的示例：

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // 这里可以添加你的认证逻辑
    return true; // 或者返回 false 来阻止导航
  }
}

在路由配置中添加 AuthGuard：

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

图片示例

以下是一些关于 Angular 路由的图片示例：

Angular Routing
Route Configuration
Dynamic Route Parameters

更多关于 Angular 路由的详细内容，请参考Angular 官方文档。


注意：图片 URL 和关键词需要替换为实际可用的图片和关键词。