浅析Angular路由中的懒加载、守卫、动态参数

青灯夜游

发布： 2021-07-01 11:05:59

转载

2240人浏览过

浅析Angular路由中的懒加载、守卫、动态参数

路由是将URL请求映射到具体代码的一种机制，在网站的模块划分、信息架构中扮演了重要的角色，而Angular的路由能力非常强大，我们一起来看看吧。【相关教程推荐：《angular教程》】

路由懒加载

Angular可以根据路由，动态加载相应的模块代码，这个功能是性能优化的利器。

为了加快首页的渲染速度，我们可以设计如下的路由，让首页尽量保持简洁、清爽：

const routes: Routes = [
  {
    path: &#39;&#39;,
    children: [
      {
        path: &#39;list&#39;,
        loadChildren: () => import(&#39;./components/list/list.module&#39;).then(m => m.ListModule),
      },
      {
        path: &#39;detail&#39;,
        loadChildren: () => import(&#39;./components/detail/detail.module&#39;).then(m => m.DetailModule),
      },
      ...
    ],
  },
];

登录后复制

首页只有一些简单的静态元素，而其他页面，比如列表、详情、配置等模块都用loadChildren动态加载。

效果如下：

其中的components-list-list-module-ngfactory.js文件，只有当访问/list路由时才会加载。

路由守卫

当我们访问或切换路由时，会加载相应的模块和组件，路由守卫可以理解为在路由加载前后的钩子，最常见的是进入路由的守卫和离开路由的守卫：

canActivate 进入守卫
canDeactivate 离开守卫

比如我们想在用户进入详情页之前，判断他是否有权限，就可以使用canActivate守卫。

增加路由守卫

{
  path: &#39;detail&#39;,
  loadChildren: () => import(&#39;./components/detail/detail.module&#39;).then(m => m.DetailModule),

  // 路由守卫
  canActivate: [AuthGuard],
},

登录后复制

编写守卫逻辑

使用CLI命令创建路由守卫模块：

ng g guard auth

登录后复制

auth.guard.ts

import { Injectable } from &#39;@angular/core&#39;;
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from &#39;@angular/router&#39;;
import { Observable } from &#39;rxjs&#39;;
import { DetailService } from &#39;./detail.service&#39;;

@Injectable({
  providedIn: &#39;root&#39;
})
export class AuthGuard implements CanActivate {
  constructor(
    private detailService: DetailService,
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return new Observable(observer => {
      // 鉴权数据从后台接口异步获取
      this.detailService.getDetailAuth().subscribe((hasPermission: boolean) => {
        observer.next(hasPermission);
        observer.complete();
      });
    });
  }
}

登录后复制

获取权限service

获取权限的service：

ng g s detail

登录后复制

detail.service.ts

import {Injectable} from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class DetailService {
  constructor(
    private http: HttpClient,
  ) { }

  getDetailAuth(): any {
    return this.http.get(&#39;/detail/auth&#39;);
  }
}

登录后复制

效果如下：

由于我们对/detail路由增加了守卫，不管是从别的路由切换到/detail路由，还是直接访问/detail路由，都无法进入该页面。

动态路由参数

在路由中带参数有很多中方法：

在path中带参数
在queryString中带参数
不通过链接带参数

在path中带参

{
  path: &#39;user/:id&#39;,
  loadChildren: () => import(&#39;./components/user/user.module&#39;).then(m => m.UserModule),
},

登录后复制

在queryString中带参数

html传参

<a [routerLink]="[&#39;/list&#39;]" [queryParams]="{id: &#39;1&#39;}">...</a>

登录后复制

ts传参

this.router.navigate([&#39;/list&#39;],{ queryParams: { id: &#39;1&#39; });

登录后复制

通过data传递静态参数

注意：通过data传递的路由参数只能是静态的

{
  path: &#39;detail&#39;,
  loadChildren: () => import(&#39;./components/detail/detail.module&#39;).then(m => m.DetailModule),
  
  // 静态参数
  data: {
    title: &#39;详情&#39;
  }
},

登录后复制

通过resolve传递动态参数

data只能传递静态参数，那我想通过路由传递从后台接口获取到的动态参数，该怎么办呢？

答案是通过resolve配置。

{
  path: &#39;detail&#39;,
  loadChildren: () => import(&#39;./components/detail/detail.module&#39;).then(m => m.DetailModule),
  
  // 动态路由参数
  resolve: {
    detail: DetailResolver
  },
},

登录后复制

创建Resolver

detail.resolver.ts

import { Injectable } from &#39;@angular/core&#39;;
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from &#39;@angular/router&#39;;
import { DetailService } from &#39;./detail.service&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class DetailResolver implements Resolve<any> {

  constructor(private detailService: DetailService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    return this.detailService.getDetail();
  }
}

登录后复制

在服务中增加获取详情数据的方法

detail.service.ts

import {Injectable} from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class DetailService {
  constructor(
    private http: HttpClient,
  ) { }

  getDetailAuth(): any {
    return this.http.get(&#39;/detail/auth&#39;);
  }

  // 增加的
  getDetail(): any {
    return this.http.get(&#39;/detail&#39;);
  }
}

登录后复制

获取动态参数

创建组件

ng g c detial

登录后复制

detail.component.ts

import { Component, OnInit } from &#39;@angular/core&#39;;
import { ActivatedRoute } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;app-detail&#39;,
  templateUrl: &#39;./detail.component.html&#39;,
  styleUrls: [&#39;./detail.component.scss&#39;]
})
export class DetailComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    // 和获取静态参数的方式是一样的
    const detail = this.route.snapshot.data.detail;
    console.log(&#39;detail:&#39;, detail);
  }

}

登录后复制

更多编程相关知识，请访问：编程视频！！

以上就是浅析Angular路由中的懒加载、守卫、动态参数的详细内容，更多请关注php中文网其它相关文章！