Angular 路由传参

在Angular中，你可以使用Router服务进行路由导航，并通过路由参数来传递数据。以下是一个简单的例子，演示如何在两个组件之间传递数据：

假设有两个组件：ComponentA 和 ComponentB。

1. 在 ComponentA 中发送数据：

在 ComponentA 中，你可以使用 Router 服务的 navigate 方法来导航到 ComponentB，并在导航中传递数据。这可以通过在导航中包含一个包含数据的对象来实现。

typescriptCopy code
import { Router } from '@angular/router';

// 在组件的构造函数中注入Router
constructor(private router: Router) { }

// 在某个方法中导航到 ComponentB，并携带数据
navigateToComponentB() {
  const dataToSend = { key: 'value' }; // 替换为你要传递的实际数据

  // 使用 navigate 方法导航到 ComponentB，并在路由参数中传递数据
  this.router.navigate(['/componentB'], { state: { data: dataToSend } });
}

1. 在 ComponentB 中接收数据：

在 ComponentB 中，你可以通过 ActivatedRoute 服务来获取路由参数，并从中提取数据。

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

// 在组件的构造函数中注入ActivatedRoute
constructor(private route: ActivatedRoute) { }

// 在组件的生命周期钩子中获取路由参数并提取数据
ngOnInit() {
  // 使用 ActivatedRoute 的 paramMap 或 snapshot 来获取路由参数
  // 如果使用 paramMap，请注意 paramMap 是一个 Observable，你可能需要使用 subscribe 方法
  const data = this.route.snapshot.state.data; // 获取携带的数据

  // 现在，你可以在 ComponentB 中使用从 ComponentA 传递过来的数据了
  console.log(data);
}

请注意，这里使用的是路由参数的 state 属性来传递数据。这是因为 state 允许你传递任意类型的数据，而不仅仅是字符串。如果你只需要传递字符串，也可以考虑使用路由参数的 queryParams 或 params 属性。