Angular 45 - 路由 paramMap 与 params

Angular 4/5 - 路由 paramMap 与 params

在Angular应用程序开发中，路由是一个非常重要的概念。它允许我们根据URL的变化来加载不同的组件，并提供了一种方便的方式来管理应用程序的导航。

在Angular中，我们可以使用路由参数来传递数据。在路由中有两种不同的参数类型，分别是 paramMap 和 params。这两种参数类型的使用方式有些不同，下面我们将详细介绍它们的用法以及它们之间的区别。

paramMap

paramMap 是一个 Observable 对象，它提供了路由参数的一种集合方式。它以键值对的方式存储了所有的参数，并且可以通过订阅 paramMap 对象来获取参数的值。

下面是一个使用 paramMap 的示例代码：

import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-my-component',
  template: <code>
    <h1>My Component</h1>
    
Param: {{ param }}
  </code>
})
export class MyComponent implements OnInit {
  param: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.param = params.get('param');
    });
  }
}

在上面的代码中，我们通过 ActivatedRoute 服务来订阅 paramMap 对象，并在回调函数中获取参数的值。在模板中，我们可以直接使用 param 变量来显示参数的值。

params

params 是一个 Observable 对象，它以参数的形式提供了路由参数的一种集合方式。与 paramMap 不同的是，params 是一个只读对象，它只能在初始化时读取一次，并且无法订阅该对象。

下面是一个使用 params 的示例代码：

import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-my-component',
  template: <code>
    <h1>My Component</h1>
    
Param: {{ param }}
  </code>
})
export class MyComponent implements OnInit {
  param: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.param = this.route.snapshot.params['param'];
  }
}

在上面的代码中，我们通过 ActivatedRoute 服务的 snapshot 属性来获取参数的值，并将其赋值给 param 变量。在模板中，我们可以直接使用 param 变量来显示参数的值。

区别与用途

paramMap 和 params 的最大区别在于它们的可观察性和可变性。paramMap 是一个可观察对象，它可以在路由参数发生变化时自动更新，并且可以多次读取参数的值。而 params 是一个只读对象，它只能在初始化时读取一次，并且无法订阅该对象。

因此，当我们需要在路由参数发生变化时自动更新参数的值时，应该使用 paramMap。而当我们只需要在初始化时读取一次参数的值时，可以使用 params。

在本文中，我们介绍了 Angular 4/5 中路由 paramMap 和 params 的用法和区别。paramMap 是一个可观察对象，可以在路由参数发生变化时自动更新参数的值，而 params 是一个只读对象，只能在初始化时读取一次参数的值。

通过使用正确的参数类型，我们可以更好地管理应用程序的导航和传递数据。

希望本文对你理解 Angular 4/5 中的路由 paramMap 和 params 有所帮助！