Angular ActivatedRoute

田雪龙 發表於 2020-4-24 18:34:00

Angular ActivatedRoute里面有几个比较容易混淆的属性
<ul>
<li>queryParams</li>
<li>queryParamMap</li>
<li>params</li>
<li>paramMap
<div class="cnblogs_code">
<pre>queryParams 和 params 都是angular里面的旧属性。据官网描述，虽然现在仍然可以使用，但可能以后就会被弃用掉，所以建议使用相对应的新的属性名称</pre>
<div class="cnblogs_code">
<pre>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.</pre>
</div>
那 queryParamMap 和 paramMap有什么区别呢？
<div class="cnblogs_code">
<pre>简单来讲， 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); </pre>
</div>
<pre> </pre>
</div>
</li>
<li>ActivatedRoute</li>
<li>ActivatedRouteSnapshot</li>
</ul>
<div class="cnblogs_code">
<pre>1. Snapshot英文原意是快照的意思，因此 ActivatedRouteSnapshot指的是ActivatedRoute中一个永恒不变的状态。它是在组建初始化时的一个路由快照。如果我们只想要获取该组件初始化时路由的信息， 那么我们就使用ActivatedRouteSnapshot. 它会忽略组件初始化之后路由的所有更新状态。而ActivatedRoute获取的是组件当前路由的信息。 2. ActivatedRouteSnapshot它存储的信息是普通的值，而ActivatedRoute它的信息是放在一个Observable里面的，因此在使用时需要subscribe,同时使用完成后需要unsubscribe. 比如：</pre>
<div class="cnblogs_code">
<pre>// 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']; });</pre>
</div>
<pre>可参考下面的文档了解详情 https://www.geekboots.com/story/difference-between-activatedroute-and-activatedroutesnapshot-in-angular </pre>
</div>
<ul>
<li>ActivatedRoute.snapshot
<div class="cnblogs_code">
<pre>@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 } </pre>
</div>
　　
</li>
<li>Router
<div class="cnblogs_code">
<pre>Router : A service that provides navigation and URL manipulation capabilities.</pre>
</div>
 
</li>
<li>queryParam</li>
<li>fragment
<div class="cnblogs_code">
<pre>queryParam指的是当路由使用HTML5 pushState 风格时，用来获取？后者navigationExtras里面queryParams设置的参数 // Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } });</pre>
<pre>
而 fragment指的是当路由使用hash URL 策略时，用来获取#后面，或者 navigationExtras里面fragment设置的参数 // Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' });</pre>
</div>
 
</li>
</ul>

</div>
<div id="MySignature" role="contentinfo">
每天一点点 
来源：https://www.cnblogs.com/juliazhang/p/12769334.html

頁: [1]

琼殿技术论坛's Archiver

Angular ActivatedRoute