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()`方法监听参数变化，并从中读取数据。

例如：

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'];
    });
  }
}