【Angular】辅助路由、路由守卫

辅助路由

插座之间的兄弟关系–辅助路由： 辅助路由需要三步：

1.插座设置： <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> 2.在路由配置中（app-routing.module.ts），配置名字为aux的组件 {path: 'xxx', component: XxxComponent,outlet:"aux"}, 3.根据链接跳转导航到辅助路由 <a [routerLink]="['/home',{outlet:{aux:'xxx'}}]">Xxx</a> <a [routerLink]="['/product',{outlet:{aux:'yyy'}}]">Yyy</a>

路由守卫

只有当用户已经等了并拥有某些权限时才能进入某些路由

一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写满足要求的信息可以导航到下一个路由

当用户未执行保存操作而试图离开当前导航时提醒用户 Angular提供了一些钩子帮助控制进入或离开路由。这写钩子就是路由守卫，可以通过钩子实现上面场景。

CanActivate:处理导航到某路由的情况

CanDeactivate:处理从当前路由离开的情况

Resolve:在路由激活之前获取路由数据

CanActivate

登录守卫： 新建guard文件夹，文件夹下创建login.guard.ts 实现CanActivate接口，根据返回值判断请求

import { CanActivate } from '@angular/router/src/utils/preactivation'; export class LoginGuard implements CanActivate{ path: import("@angular/router").ActivatedRouteSnapshot[]; route: import("@angular/router").ActivatedRouteSnapshot; canActivate(){ let loggedIn:boolean=Math.random()<0.5; if(!loggedIn){ console.log("用户未登陆"); } return loggedIn; } }

修改路由配置，把它加入产品信息的路由上 当满足某些条件时，才允许进入路由

CanDeactivate

确保用户执行保存操作，才能离开当前页面，与CanActivate不同，多了一个泛型，要指定当前组件的类型，如下图的ProductComponent组件 实例：在guard 文件夹下创建unsaved.guard.ts

import {CanDeactivate} from "@angular/router"; import { ProductComponent } from '../product/product.component'; export class UnsavedGuard implements CanDeactivate<ProductComponent>{ canDeactivate(component: ProductComponent) { return window.confirm("您还没保存，确定要离开么？"); } }

同样，配置路由 当页面离开的时候就会出现询问

Resolve守卫

Resolve守卫可以进入路由之前去服务器读数据，把需要的数据都读好以后，带着这些数据进到路由里，立刻就把数据显示出来。 实例：在guard文件夹下建立product.resolve.ts文件，Resolve与CanDeactivate接口一样都需要泛型

import { Resolve, Router } from '@angular/router'; import { ProductDescComponent } from '../product-desc/product-desc.component'; import { product } from '../product/product.component'; import { Injectable } from '@angular/core'; @Injectable() export class ProductReslove implements Resolve<product>{ constructor(private router:Router){ } resolve(route: import("@angular/router").ActivatedRouteSnapshot, state: import("@angular/router").RouterStateSnapshot): product | import("rxjs").Observable<product> | Promise<product> { let productId:number=route.params["id"]; if(productId==1){ return new productId(1,"ipone8"); }else{ this.router.navigate(['/home']); return undefined; } }

配置路由信息：