1. 引言

在 Angular 应用中，经常会遇到需要在组件之间共享数据的情况。URL 参数是其中一种常见的方式，它不仅可以通过浏览器地址栏直观地看到数据，还可以方便地传递给其他用户。

2. 配置路由

首先，我们需要配置路由。在 `app-routing.module.ts` 文件中定义带有参数的路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';

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

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

这里，`:id` 是一个路由参数。

3. 传递参数

我们可以使用 `Router` 服务的 `navigate` 方法来传递参数。例如，在 `AppComponent` 中，点击按钮跳转到用户详情页：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    Go to User 1
  `
})
export class AppComponent {
  constructor(private router: Router) {}

  goToUser(id: number) {
    this.router.navigate(['/user', id]);
  }
}
        

4. 获取参数

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

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

@Component({
  selector: 'app-user',
  template: `
    
User Details
    
User ID: {{ userId }}
  `
})
export class UserComponent implements OnInit {
  userId: number | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.userId = +params['id']; // 注意这里的类型转换
    });
  }
}
        

5. 测试与验证

启动应用，并点击“Go to User 1”按钮，应跳转到 `user/1` 并显示用户 ID。

6. 小结

通过 Angular Router，我们可以很方便地在组件间传递和获取 URL 参数。这在构建复杂的单页面应用时是非常有用的。

7. 进一步阅读

如果你需要更复杂的参数处理或者更高级的路由特性，可以参考 Angular 官方文档中的 路由指南。