angular+ 路由学习 (七)路由守卫--resolver和canDeactivate

  • resolver 可用来预先获取 将要导航去某路由之前 目的路由的数据,以便在组件渲染后,将数据显示出来,防止异步延迟带来的无数据用户体验
  • 这里接着官网的案例;
    ng g service crisis-center/crisis-detail-resolver // 创建resolver守卫服务
    
    // crisis-detail-resolver.service.ts 
    import { Injectable } from '@angular/core';
    import {
      Router, Resolve,
      RouterStateSnapshot,
      ActivatedRouteSnapshot
    } from '@angular/router';
    import { Observable, of, EMPTY } from 'rxjs';
    import { mergeMap, take } from 'rxjs/operators';
    
    import { CrisisService } from './crisis.service';
    import { Crisis } from './crisis';
    
    @Injectable({
      providedIn: 'root',
    })
    export class CrisisDetailResolverService implements Resolve<Crisis> {
      constructor(private cs: CrisisService, private router: Router) { }
    // 在导航到详情路由前,就将数据初始化以保证数据预先加载,提高用户体验(防止数据延迟导致无法即时显示)
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> | Observable<never> {
      let id = route.paramMap.get('id');
    
      return this.cs.getCrisis(id).pipe(
        take(1), // 确保这个可观察对象会从getCrisis()中取到第一个值就结束
        mergeMap(crisis => {
          if (crisis) {
            return of(crisis);
          } else { // id not found
            this.router.navigate(['/crisis-center']);
            return EMPTY;
          }
        })
      );
    }
      
    }

     

  • 将该服务导入到该模块路由中(crisis-center-routing.module.ts)
    // ....
    import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
    
    const crisisCenterRoutes: Routes = [
      {
        path: 'crisis-center', component: CrisisCenterComponent, children: [
          { path: '', component: CrisisListComponent, children: [
            { path: ':id', component: CrisisDetailComponent, resolve: { crisis: CrisisDetailResolverService }},
            { path: '', component: CrisisCenterHomeComponent}
          ]}
        ]
      }
    ];
    
    // ...

     

  • 在crisis-detail.component.ts 中;因为有了这个预先获取数据的服务;只需要从这个路由的data中获取数据(ActivateRoute.data 里包含了预先处理的解析数据)
    import { Component, OnInit, Input } from '@angular/core';
    import { Router, ActivatedRoute, ParamMap } from '@angular/router'; // 导入类
    import { Observable } from 'rxjs';
    
    import { Crisis } from '../crisis';
    
    
    @Component({
      selector: 'app-crisis-detail',
      templateUrl: './crisis-detail.component.html',
      styleUrls: ['./crisis-detail.component.css']
    })
    export class CrisisDetailComponent implements OnInit {
    
      crisis: Crisis;
      editName: string;
      // 服务注入
      constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute
      ) { }
    
      ngOnInit() { 
        // ActivatedRoute 的 data; 它是一个Observable对象,包含解析守卫resolve 解析的值;
        this.activatedRoute.data.subscribe((data: { crisis: Crisis }) => {
          console.log(data);
          this.editName = data.crisis.name;
          this.crisis = data.crisis;
        })
    
      }
      // 使用相对路径导航,需要提供当前的ActivatedRoute,让路由器知道当前处于路由树的位置
      // 使用: 链接参数数组后,添加relativeTo属性,并设置为当前的ActivatedRoute
      gotoCrises() {
        let crisisId = this.crisis ? this.crisis.id : null;
        this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.activatedRoute }); // 相对路由跳转;
      }
      save() {
        this.crisis.name = this.editName;
        this.gotoCrises();
      }
      cancel() {
        this.gotoCrises();
      }
    
    }
    <!-- // crisis-detail.html  -->
    <h2>crisisES</h2>
    
    <div *ngIf="crisis">
        <h3>"{{ editName }}"</h3>
        <div>
          <label>Id: </label>{{ crisis.id }}</div>
        <div>
          <label>Name: </label>
          <input [(ngModel)]="editName" placeholder="name"/>
        </div>
        <p>
          <button (click)="save()">Save</button>
          <button (click)="cancel()">Cancel</button>
        </p>
      </div>
      

     

  • 现在可以对详情进行更改操作,但是如果我们离开这个页面,未点击保存事件的值将不会被保存,此时需要提供一个处理未保存的更改功能么,以提高用户体验;
  • CanDeactivate 守卫 可以对这个需求提供解决方法;
  • ng generate service dialog // 创建一个对话框服务,该服务处理用户确认或取消操作
    
    // 内容
    import { Injectable } from '@angular/core';
    import { Observable, of } from 'rxjs';
    @Injectable({
      providedIn: 'root'
    })
    export class DialogService {
    
      constructor() { }
      // 显示对话框,等待用户操作,返回observable ,当用户最终决定后,它会被解析;
      confirm(message?: string): Observable<boolean> {
        const confirmation = window.confirm(message || 'Is it OK?');
    
        return of(confirmation);
      }
    }

     

  • 创建一个守卫,以检查组件是否存在canDeactivate()方法,因为守卫可 不需要知道 (任意)组件确认退出的激活状态, 但是它只需要检查该组件是否有一个canDeactivate()方法,并调用这个方法即可;
    ng generate guard can-deactivate
    
    // 内容
    import { Injectable } from '@angular/core';
    import { CanDeactivate } from '@angular/router';
    import { Observable } from 'rxjs';
    
    export interface CanComponentDeactivate {
      canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
    }
    
    @Injectable({
      providedIn: 'root',
    })
    export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
      canDeactivate(component: CanComponentDeactivate) {
        return component.canDeactivate ? component.canDeactivate() : true;
      }
    }

     

  • 在crisis-center-routing.module.ts中配置守卫
    import { CanDeactivateGuard } from '../can-deactivate.guard';
    import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
    
    
    const crisisCenterRoutes: Routes = [
      {
        path: 'crisis-center', component: CrisisCenterComponent, children: [
          { path: '', component: CrisisListComponent, children: [
            // tslint:disable-next-line: max-line-length
            { path: ':id', component: CrisisDetailComponent, canDeactivate: [CanDeactivateGuard], resolve: { crisis: CrisisDetailResolverService }},
            { path: '', component: CrisisCenterHomeComponent}
          ]}
        ]
      }
    ];

     

  • 在crisis-detail.component.ts 中使用canDeactivate
      // 处理未保存的更改确认
      // canDeactivate 方法可以同步返回,如果没有危机,或者没有未定的修改,它就立即返回 true。但是它也可以返回一个承诺(Promise)或可观察对象(Observable),路由器将等待它们被解析为真值(继续导航)或假值(留下)
      canDeactivate(): Observable<boolean> | boolean {
        if (!this.crisis || this.crisis.name === this.editName) {
          return true;
        }
        return this.dialogService.confirm('Discard changes?');
    }

     

  • 效果展示

angular+ 路由学习 (七)路由守卫--resolver和canDeactivate

 

上一篇:Google日历添加农历、节日和天气插件(步骤)


下一篇:paip.日期时间操作以及时间戳uapi php java python 总结