Angular ActivatedRoute

Angular ActivatedRoute里面有几个比较容易混淆的属性

queryParams
queryParamMap
params

paramMap

queryParams 和 params 都是angular里面的旧属性。据官网描述，虽然现在仍然可以使用，但可能以后就会被弃用掉，所以建议使用相对应的新的属性名称

Two older properties are still available, however, their replacements are preferable as they may be deprecated in a future Angular version.

params: An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

queryParams: An Observable that contains the query parameters available to all routes. Use queryParamMap instead.

那 queryParamMap 和 paramMap有什么区别呢？

简单来讲， queryParamMap获取的是activatedRoute 路由中？后面的参数， 比如： user/:id   这里的id；而paramMap获取的是路由配置中占位符所代表的参数， 比如：user/:id?tab=edit  这里的tab。

当然， queryParamMap还能获取NavigationExtras里面设置的参数， 比如：

    // Set our navigation extras object
    // that contains our global query params and fragment
    let navigationExtras: NavigationExtras = {
      queryParams: { 'session_id': sessionId },
      fragment: 'anchor'
    };
   this.router.navigate(['/login'], navigationExtras);

ActivatedRoute
ActivatedRouteSnapshot

1. Snapshot英文原意是 快照 的意思， 因此 ActivatedRouteSnapshot指的是ActivatedRoute中一个永恒不变的状态。它是在组建初始化时的一个路由快照。如果我们只想要获取该组件初始化时路由的信息，
那么我们就使用ActivatedRouteSnapshot. 它会忽略组件初始化之后路由的所有更新状态。而ActivatedRoute获取的是组件当前路由的信息。
2. ActivatedRouteSnapshot它存储的信息是普通的值， 而ActivatedRoute它的信息是放在一个Observable里面的，因此在使用时需要subscribe,同时使用完成后需要unsubscribe. 比如：

// ActivatedRouteSnapshot
 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> | Observable<never> { 
　　let id = route.paramMap.get('id');
　　......
}

// ActivatedRoute
this.routeSub = this.route.paramMap.subscribe((params) => {
　　id = params['id'];
});

可参考下面的文档了解详情
https://www.geekboots.com/story/difference-between-activatedroute-and-activatedroutesnapshot-in-angular

ActivatedRoute.snapshot

@Component({templateUrl:'./my-component.html'})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: string = route.snapshot.params.id;  // route.snapshot其实就是 ActivatedRouteSnapshot类型
    const url: string = route.snapshot.url.join('');
    const user = route.snapshot.data.user;
  }
}


参考：
interface ActivatedRoute { 
snapshot: ActivatedRouteSnapshot 
url: Observable<UrlSegment[]> 
params: Observable<Params> 
queryParams: Observable<Params> 
fragment: Observable<string> 
data: Observable<Data> 
outlet: string 
component: Type<any> | string | null 
routeConfig: Route | null 
root: ActivatedRoute 
parent: ActivatedRoute | null 
firstChild: ActivatedRoute | null 
children: ActivatedRoute[] 
pathFromRoot: ActivatedRoute[] 
paramMap: Observable<ParamMap> 
queryParamMap: Observable<ParamMap> 
toString(): string 
}

Router

Router : A service that provides navigation and URL manipulation capabilities.

queryParam

fragment

queryParam指的是当路由使用HTML5 pushState 风格时，用来获取？后者navigationExtras里面queryParams设置的参数
// Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } });


而 fragment指的是当路由使用hash URL 策略时，用来获取#后面，或者 navigationExtras里面fragment设置的参数
// Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' });

每天一点点