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

  • 相关阅读:
    操作系统中线程中所需内存来源哪里
    【转】在单片机(MCU)上运行Qt
    【转】Qt QtCreator 所有版本官方下载地址
    emwin之BUTTON控件显示位图和流位图出现卡顿延迟的情况
    【转】8段数码管引脚图,8段数码管动态显示详解
    emwin之窗口ID的唯一性
    KEIL之工程单独文件属性修改
    emwin之在中断服务程序中创建窗口的结果
    emwin之创建窗口与窗口回调函数的句柄是一致的
    【转】C语言堆栈入门——堆和栈的区别
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5924169.html
Copyright © 2011-2022 走看看