Angular4中的ActivatedRoute和ActivatedRouteSnapshot有什么区别

Question

Angular 4中ActivatedRouteSnapshot和ActivatedRoute之间的区别是什么？我的理解是ActivatedRouteSnapshot是ActivatedRoute的孩子，这意味着ActivatedRoute包含ActivatedRouteSnapshot。

顺便说一句，我尝试在谷歌搜索中搜索这个问题的答案，但我没有发现任何搜索结果是可以理解的。

谢谢！

Answer 1

自ActivatedRoute can be reused以来，ActivatedRouteSnapshot是一个不可变对象，代表 ActivatedRoute的特定版本。它将所有与ActivatedRoute相同的属性公开为普通值，而ActivatedRoute将它们公开为可观察值。

以下是实施中的评论：

export class ActivatedRoute {
  /** The current snapshot of this route */
  snapshot: ActivatedRouteSnapshot;

如果路由器重新使用某个组件但未创建新的激活路由，则对于同一ActivatedRouteSnapshot，您将拥有两个ActivatedRoute版本。假设您有以下路由配置：

path: /segment1/:id,
component: AComponent

现在导航到：

/segment1/1

您将activatedRoute.snapshot.params.id中的参数设为1。

现在导航到：

/segment1/2

您将activatedRoute.snapshot.params.id中的参数设为2。

您可以通过实施以下内容来查看：

export class AComponent {
  constructor(r: ActivatedRoute) {    
    r.url.subscribe((u) => {
      console.log(r.snapshot.params.id);
    });

Answer 2

有两种方法可以从路由获取参数。

1。快照（route.snapshot.paramMap.get）。在初始化过程中阅读它。

如果在组件初始化期间仅需要一次参数的初始值，并且不希望用户仍在该组件上时URL会更改，则使用快照。

• 即如果是在product / 2路线上，那么他们进入product / 3的唯一方法是返回产品搜索屏幕，然后单击产品详细信息（保留详细信息组件，然后使用新路线重新打开它）参数）

2。可观察（route.paramMap.subscribe）。在初始化期间订阅它。

如果在用户仍位于同一组件上的情况下路由可能发生更改，请使用Observable，因此不会再次调用该组件的初始化，但是当URL更改时，observable会调用您的预订逻辑。

• 即如果在产品详细信息页面上，您具有“下一个”按钮转到下一个ID，因此用户没有离开/重新打开组件，但URL确实收到了新的参数。

通常来说，如果不确定，订阅是最安全的途径。

Answer 3

这里没有其他答案突出的关键差异之一是可以将ActivatedRoute注入组件，而不能ActivatedRouteSnapshot注入组件。

如this answer中所述，您可以通过注入ActivatedRouteSnapshot，然后访问其ActivatedRoute属性来访问组件中的snapshot，如下所示：

constructor(route: ActivatedRoute) { 
  let activatedRouteSnapshot = route.snapshot;
}

另一方面，尝试将ActivatedRouteSnapshot直接注入组件将导致如下错误：

  

错误错误：未捕获（承诺）：错误：StaticInjectorError（AppModule）[YourComponent-> ActivatedRouteSnapshot]：     StaticInjectorError（平台：核心）[YourComponent-> ActivatedRouteSnapshot]：       NullInjectorError：没有提供ActivatedRouteSnapshot的提供程序！

另请参阅ActivatedRoute和ActivatedRouteSnapshot的文档