Question

我通常在routes上通过我的应用程序使用这种方式。

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

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

但是在文档上方，我也可以看到基于可观察的方法。

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

您能告诉我为什么我们需要这种方法吗？ Doc这么说

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

但是我不清楚。您能告诉我为什么我们需要一种基于可观察的方法吗？

Answer 1

这意味着您的方式只会获得param的第一个值。但是，如果您需要处理参数更改（例如存储在查询字符串中的过滤器更改），则需要使用第二种方法

Answer 2

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

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

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

假定URL为“ DOMAIN / product / 1”，并且存在产品2的链接。通过单击链接，浏览器将URL更改为“ DOMAIN / product / 2”，但是angular会重复使用product show组件。由于上述原因，快照方法不会注意到更改。

Answer 3

您需要观察一下，因为如果您有一条路线“ user / 2”并且您有此方法

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

当您在网址中将2更改为3时，如果您有以下方法，则this.id中的值将保持为“ 2”：

>    this.id$ = this.route.paramMap.pipe(
>       map((params: ParamMap) => params.get('id')),
>     );

您的新用户“ id”具有可观察性，因为当您使用不同的参数重新导航到同一条路线时，请勿破坏并重新创建组件，因此在更改参数时不会再次触发ngOnInit。