Angular4中的ActivatedRoute和ActivatedRouteSnapshot有什么区别

Question

ActivatedRouteSnapshot和ActivatedRouteAngular 4有什么区别？这是我的理解,ActivatedRouteSnapshot是一个孩子ActivatedRoute,意味着ActivatedRoute包含ActivatedRouteSnapshot.

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

谢谢!

Answer 1

由于ActivatedRoute 可以重用,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.idas中拥有param 1.

现在您导航到:

/segment1/2

你将在activatedRoute.snapshot.params.idas中拥有param 2.

您可以通过实现以下内容来查看它:

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

Answer 2

有两种方法可以从路径中获取参数.

1.快照(route.snapshot.paramMap.get).在ctor期间阅读它.

如果在组件的构造函数/ init期间只需要参数的初始值一次,请使用快照,并且当用户仍在同一组件上时,不要期望更改URL.

• 即,如果在产品/ 2路线上,他们获得产品/ 3的唯一方法是返回产品搜索屏幕,然后单击产品详细信息(离开详细信息组件,然后重新打开它)路线参数)

2.可观察(route.paramMap.subscribe).在ctor期间订阅它.

如果在用户仍在同一组件上时路由可能发生变化,则使用Observable,因此不会再次调用Component的构造函数/ init,但是当URL更改时,observable将调用您订阅的逻辑.

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

Answer 3

此处其他答案未强调的主要区别之一是ActivatedRoute可以注入到组件中，而ActivatedRouteSnapshot不能注入到组件中。

如本答案所述，您可以ActivatedRouteSnapshot通过注入ActivatedRoute，然后访问其snapshot属性来访问组件，如下所示：

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

另一方面，尝试ActivatedRouteSnapshot直接注入组件会导致这样的错误：

错误错误：未捕获（承诺）：错误：StaticInjectorError(AppModule)[YourComponent -> ActivatedRouteSnapshot]：StaticInjectorError(Platform：core)[YourComponent -> ActivatedRouteSnapshot]：NullInjectorError：ActivatedRouteSnapshot 没有提供者！

另请参阅ActivatedRoute和ActivatedRouteSnapshot的文档