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' });