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