基于 Observable 的 paramMap 方法的用例

Question

ngOnInit() {
  let id = this.route.snapshot.paramMap.get('id');

  this.hero$ = this.service.getHero(id);
}

但在上面的文档中我也可以看到基于 Observable 的方法。

ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')))
  );
}

你能告诉我为什么我们需要这种方法吗？医生这样说

使用此技术您只能获得参数映射的初始值。如果路由器有可能重用该组件，请坚持使用可观察的 paramMap 方法。

但我不清楚。你能告诉我为什么我们需要基于 Observable 的方法吗？

Answer 1

使用此技术您只能获得参数映射的初始值。如果路由器有可能重用该组件，请坚持使用可观察的 paramMap 方法。

这意味着如果同一组件存在导航事件，Angular 将不会重新创建该组件，因为该组件已经可用。因此 ngOnInit 不会再次运行，导致忽略参数的更改（快照仅保存第一次出现的值）。在可观察方法的情况下，它将被订阅并处理参数的更改。

当您显示产品之类的实体并且有相关产品的导航按钮时，应考虑此用例。

假设 url 是“DOMAIN/product/1”，并且有产品 2 的链接。通过单击该链接，浏览器将 url 更改为“DOMAIN/product/2”，但 Angular 将重用产品显示组件。由于上述原因，快照方法不会注意到变化。