zoukankan      html  css  js  c++  java
  • [Angular2 Router] CanDeactivate Route Guard

    In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example save data that was not yet persisted.

    What 'canDeactivate' do is for example, you are editing a form, and you click other page by mistake, system will show a confirm dialog to ask whether you want to stay this page.

    So first, add input box in hero component, when you type something and press enter, will edit the 'editing' variable to 'true', then we use this variable to control.

    import {
      Component,
      OnInit,
      OnDestroy,
      ViewChild,
    } from '@angular/core';
    import {ActivatedRoute, Router} from "@angular/router";
    import {StarWarsService} from "../heros.service";
    import {Observable, Subscription} from "rxjs";
    
    @Component({
      selector: 'app-hero',
      templateUrl: 'hero.component.html',
      styleUrls: ['hero.component.css']
    })
    export class HeroComponent implements OnInit, OnDestroy {
    
      @ViewChild('inpRef') input;
    
      heroId: number;
      hero: Observable<any>;
      description: string;
      querySub: Subscription;
      editing: boolean = false;
    
      constructor(private route: ActivatedRoute,
                  private router: Router,
                  private starwarService: StarWarsService) {
      }
    
      ngOnInit() {
        this.hero = this.route.params
         .map((p:any) => {
          this.editing = false;
          this.heroId = p.id;
          return p.id;
         })
         .switchMap( id => this.starwarService.getPersonDetail(id));
    
    
       /* // since herocomponent get init everytime, it would be better to use snapshot for proferemence
        this.heroId = this.route.snapshot.params['id'];
        this.hero = this.starwarService.getPersonDetail(this.heroId);*/
    
        this.querySub = this.route.queryParams.subscribe(
          param => this.description = param['description']
        );
    
        console.log("observers", this.route.queryParams['observers'].length)
      }
    
      ngOnDestroy() {
        this.querySub.unsubscribe()
      }
    
      saveHero(newName){
        this.editing = true;
        console.log("editing", this.editing)
      }
    
      prev(){
        return Number(this.heroId) - 1;
      }
    
      next(){
        return Number(this.heroId) + 1;
      }
    }

    Because now, from our hero compoennt, we can navigate to other hero component, so snapshot is not ideal for this case, we need to use router.params.

    <div>
      <h2>{{description}}: {{(hero | async)?.name}}</h2>
      <div>
        <a [routerLink]="['/heros', prev()]">Previous</a>
        <a [routerLink]="['/heros', next()]">Next</a>
      </div>
      <div>
        <input type="text" #inpRef (keyup.enter)="saveHero(inpRef.value)">
      </div>
      <br>
      <img src="{{(hero | async)?.image}}" alt="">
      <div>
        <a [routerLink]="['/heros']">Back</a>
      </div>
    </div>

    CanDeactivateHero.ts:

    import {CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
    import {Observable} from "rxjs";
    import {HeroComponent} from "./hero/hero.component";
    export class CanHeroDeactivate implements CanDeactivate<HeroComponent>{
      canDeactivate(component: HeroComponent,
                    route: ActivatedRouteSnapshot,
                    state: RouterStateSnapshot): Observable<boolean>|boolean {
    
        if(!component.editing){
          return true;
        }
    
        return confirm('You have unsaved message, are you sure to leave the page?')
      }
    
    }

    Heros.router.ts:

    import {HerosComponent} from "./heros.component";
    import {RouterModule} from "@angular/router";
    import {HeroComponent} from "./hero/hero.component";
    import {CanHeroDeactivate} from "./CanDeactiveHero.directive";
    const routes = [
      {path: '', component: HerosComponent},
      {path: ':id', component: HeroComponent, canDeactivate: [CanHeroDeactivate]},
    ];
    export default RouterModule.forChild(routes)

    heros.module.ts:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { HerosComponent } from './heros.component';
    import herosRoutes from './heros.routes';
    import {HeroComponent} from "./hero/hero.component";
    import {StarWarsService} from "./heros.service";
    import {RouterModule} from "@angular/router";
    import {CanHeroDeactivate} from "./CanDeactiveHero.directive";
    
    @NgModule({
      imports: [
        CommonModule,
        herosRoutes
      ],
      declarations: [HerosComponent, HeroComponent],
      providers: [StarWarsService, CanHeroDeactivate]
    })
    export default class HerosModule { }

    Github

  • 相关阅读:
    第一天
    在代码层面描述软件的可测试性
    Datax环境搭建
    质量属性中六个常见的属性场景--以淘宝网为例
    01.《架构漫谈》阅读笔记
    我的第一个MVC程序(SpringMVC的环境搭建与实例运用)
    1.15学习进度总结
    1.14学习进度总结
    1.13学习进度总结
    1.12学习进度总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5924169.html
Copyright © 2011-2022 走看看