一、引言

在构建单页应用（SPA）时，路由是一个非常重要的概念。它允许我们在不重新加载整个页面的情况下，动态地加载和显示不同的视图。Angular 提供了一个强大的路由系统，帮助开发者轻松实现这一点。

二、Angular 路由基础

在Angular中，路由是通过`@angular/router`模块实现的。首先，我们需要在项目中安装并配置这个模块。

1. 安装`@angular/router`模块（如果尚未安装）：

   ng add @angular/router

2. 配置路由：在`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';

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

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

三、使用“

在`AppComponent`的模板中，我们需要添加一个“标签，这是Angular路由机制中的一个关键组件，用于显示当前激活的路由组件。

示例代码

四、路由链接

我们可以使用``标签结合Angular的`routerLink`指令来创建导航链接。

五、路由参数和查询参数

在实际应用中，我们可能需要传递一些参数给路由组件。Angular支持路由参数和查询参数。

路由参数示例

假设我们有一个`UserComponent`，用于显示特定用户的详情。

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

在`UserComponent`中，我们可以通过`ActivatedRoute`服务获取路由参数。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.userId = params['id'];
    });
  }
}
        

查询参数示例

查询参数可以通过URL中的`?`符号传递。

Search Angular
        

在组件中，同样可以通过`ActivatedRoute`服务获取查询参数。

this.route.queryParams.subscribe(params => {
  console.log(params['query']); // 输出 'angular'
});
        

六、总结

通过本文，我们了解了Angular路由的基础知识和一些高级用法。路由是构建单页应用的重要工具，掌握它能帮助我们创建更加动态和灵活的Web应用。