Angular的路由延迟加载

Angular的路由延迟加载

angular的路由延迟加载大致分为两类CanActivate和CanLoad。这两个方法都可以进行一些条件判断来决定是否加载相关的路由。

CanActivate

简单的应用

• 新建一个pageRouteLoad.ts

@Injectable()
export class PageRouteLoad implements CanActivate {

    canActivate():Observable {
        return false;
    }
}

• 更改路由,在原路由的基础上添加上一个canLoad属性，并且赋值为新建的路由拦截对象

export const routes: Routes = [
    {
        path:"userControl",
        component:UsersControlComponent,
        canActivate:[PageRouteLoad],
    },
]

angular还会向canLoad方法中传入两个参数ActivatedRouteSnapshot和RouterStateSnapshot

• ActivatedRouteSnapshot

  表示要激活的目标配置项

• RouterStateSnapshot

  表示当前的路由状态
  通过这两个参数可以获取相关的路由信息。

 canActivate(route:ActivatedRouteSnapshot,router:RouterStateSnapshot){
     
 }

异步的情况

如果决定是否加载下一个页面需要的条件是异步的结果，则需要返回一个Observable才行

    canActivate(route:ActivatedRouteSnapshot,router:RouterStateSnapshot): any {
        return new Observable((observer) => {
                    observer.next(true);
                }
            },()=>{
                observer.next(false);
            },complete=>{
               observer.complete();
            });
        });
    }

通过返回一个Observable才能使异步的结果生效，并且必须调用complete()函数，表示当前Observable已经完结了，否则不会进行跳转。

CanLoad

实际上CanLoad和CanActivate在表面上的表现并没有差异，都是对路由进行拦截加载。

@Injectable()
export class PageRouteLoad implements CanLoad {

    canLoad():Observable {
        return false;
    }
}

export const routes: Routes = [
    {
        path:"userControl",
        component:UsersControlComponent,
        canLoad:[PageRouteLoad],
    },
]

这个CanLoad对象也不会让UsersControlComponent不加载。但是它们的不同就是，使用CanActivate，即使返回的是false，用户并没有权限访问该路由，但是相应的模块会被加载。使用CanLoad的话，用户也没有权限访问，相应的模块并不会被加载。这里是指对应组件的代码。