Angular Router 指南

Angular 的 Router 是一个强大的导航和视图管理工具，它允许你在应用程序中定义路由和视图。以下是一些关于 Angular Router 的基本概念和用法。

基本概念

• 路由：路由定义了如何将用户请求映射到应用程序中的组件。
• 组件：Angular 的视图是通过组件来实现的，每个组件都对应一个 HTML 模板。
• 导航：用户可以通过不同的方式来导航到不同的路由，例如链接、按钮或表单输入。

路由配置

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

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

路由链接

在组件的模板中，你可以使用 <a> 标签来创建路由链接。

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

动态路由参数

有时候，你可能需要根据路由参数来加载不同的数据。这可以通过在路由定义中使用冒号来指定参数。

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

在模板中，你可以使用 routerLinkActive 类来高亮显示当前活动的链接。

<a routerLink="/user/123" routerLinkActive="active-link">User 123</a>

图片示例

Angular Router 示例

扩展阅读

想要了解更多关于 Angular Router 的信息，可以阅读官方文档：Angular Router Guide

请注意，Angular 的 Router 是一个非常强大的工具，具有许多高级特性。以上只是冰山一角。希望这个指南能帮助你开始使用 Angular Router。