angular 路径参数和查询参数

在Angular项目中，路由传参通常用于将数据从一个组件传递到另一个组件，而接收参数则是为了在目标组件中访问这些数据。Angular通过`ActivatedRoute`服务实现路由参数的处理。 **传参**: - 使用`router.navigate`时，可以在URL中包含查询参数（query params）的形式，如`'/users/:userId'`，其中`:userId`是一个动态参数占位符。 - `params`对象可以用来携带自定义参数，如`this.router.navigate(['/users', userId])`。此时，在目标组件的路由守卫或构造函数中，你可以通过`activatedRoute.snapshot.params['userId']`来获取参数值。 **接收参数**: - 在组件类中，需要注入`ActivatedRoute`。 - 当路由改变并且匹配到带有参数的路径时，组件的生命周期钩子如`ngOnInit`会被触发。 - 在`ngOnInit`或其他生命周期钩子中，可以使用`ActivatedRoute`的`params.subscribe()`方法监听参数变化，并从中读取数据。 例如： ```typescript import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', template: ` <h2>User Details</h2> <p>ID: {{ userId }}</p> `, }) export class UserComponent implements OnInit { userId: string; constructor(private route: ActivatedRoute) {} ngOnInit(): void { this.route.params.subscribe(params => { this.userId = params['userId']; }); } } ```