Angular激活路由前解析数据、从路由中获取信息

最新推荐文章于 2024-07-05 16:07:29 发布

江小虫儿

最新推荐文章于 2024-07-05 16:07:29 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular.js typescript 前端

本文链接：https://blog.youkuaiyun.com/Kate_sicheng/article/details/122591912

Angular 专栏收录该内容

24 篇文章

订阅专栏

本文探讨Angular的路由解析，介绍如何在激活路由前通过Resolve接口解析数据，并讲解如何利用ActivatedRoute从路由中获取信息，确保组件加载时已有所需数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在路由器激活路由前解析数据 - Resolve

Resolve接口定义了开始导航时调用 resolve() 路由器在最终激活路由之前等待数据解析。

interface Resolve<T> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T
}

在Resolver中解析数据：

@Injectable({ providedIn: 'root' })
export class HeroResolver implements Resolve<Hero> {
  constructor(private service: HeroService) {}

  // 注意：返回值类型
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    // 获取路由中的id信息：route.paramMap.get('id')
    // return 示例1
    return this.service.getHero(route.paramMap.get('id'));

    // return 示例2（调了接口，数据不存到路由中）
    return this.myStore.fetchData().pipe(
        // 接口有误时抛出异常
        catchError(() => {
            return of(null);
        })
    );

    // return 示例3（调了接口，数据存到路由中）
    return this.myStore.fetchData().pipe(
        catchError(() => {
            // do something...
            return of(null);
        }),
        tap((data) => {
            // do something...
            return of(data);  // 可在该Resolver对应的路由所匹配的组件中通过ActivateRoute.snapshot.data[resolveKey]获取到这个数据。在这里resolveKey是'hero'。
        })
    );

  }
}

下面定义的 resolve() 函数作为路由器配置中 Route 对象的一部分提供：

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {
          hero: HeroResolver // 激活路由前先在Resolver中解析数据
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

从路由中获取信息 - ActivatedRoute

ActivatedRoute允许访问与该组件关联的路由的信息。用于遍历 RouterState 树并从节点提取信息。

class ActivatedRoute {
  snapshot: ActivatedRouteSnapshot     ⭐️⭐️⭐️
  url: Observable<UrlSegment[]>
  params: Observable<Params>
  queryParams: Observable<Params>  
  fragment: Observable<string | null>
  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
}

// ActivatedRoute.snashot
class ActivatedRouteSnapshot {
  routeConfig: Route | null     // 路由配置的信息
  url: UrlSegment[]
  params: Params
  queryParams: Params        //拿路由中的参数值
  fragment: string | null
  data: Data          // 拿路由激活前resolve中解析的数据
  outlet: string
  component: Type<any> | string | null     // 关联该路由的组件
  root: ActivatedRouteSnapshot
  parent: ActivatedRouteSnapshot | null
  firstChild: ActivatedRouteSnapshot | null
  children: ActivatedRouteSnapshot[]
  pathFromRoot: ActivatedRouteSnapshot[]
  paramMap: ParamMap
  queryParamMap: ParamMap
  toString(): string
}

示例：

<a href="javascript:;" [routerLink]="['/project/task/', task._id]" [queryParams]="{ _id: task._id }">点击跳转路由</a>

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {}

this.activatedRoute.queryParams.subscribe(queryParams => {
    const taskId = queryParams['_id'];
});