RouterLink 查询参数

在 Angular 中，我们经常需要在组件之间跳转并且传递参数。Angular 提供了 RouterLink 指令来实现简单的页面跳转，同时我们也可以通过传递参数的方式完成组件之间的数据传递。本文将介绍如何使用 RouterLink 查询参数来传递参数。

使用 RouterLink 查询参数传递参数

在 Angular 中，我们可以通过 RouterLink 查询参数来传递参数。查询参数是在 URL 中传递的参数。假设我们有一个用户列表组件和一个用户详情组件。我们希望在用户列表组件中点击某个用户的链接时，能够跳转到用户详情组件并且传递相应的用户 ID。

<a routerLink="/userDetails" [queryParams]="{ userId: user.id }">{{ user.name }}</a>

在上述代码中，我们使用 RouterLink 指令来实现页面跳转，同时使用 queryParams 属性来传递查询参数。queryParams 属性需要一个 JSON 对象作为参数，该对象的 key 为参数名，value 为参数值。在用户详情组件中，我们可以使用 ActivatedRoute 服务来获取传递的参数。

import { ActivatedRoute } from '@angular/router';

@Component({
  ...
})
export class UserDetailsComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

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

在上述代码中，我们使用 ActivatedRoute 服务来获取传递的查询参数。具体来说，我们通过 subscribe 方法监听 queryParams 事件来获取参数，并将其赋值给 userId 属性。

结论

通过上述方法，我们可以轻松地在组件之间传递数据。使用 RouterLink 查询参数来传递参数，既简单又方便。希望本文对你有所帮助！