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

   

每天一点点

来源：https://www.cnblogs.com/juliazhang/p/12769334.html