Question

我想知道CanActivate后卫与CanDeactivate后卫为何不同。

可以激活

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class CanActivateGuard implements CanActivate {
  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true;
  }
}

在这个警卫中，您只需检查路线并使用一些服务即可。太好了，但是请稍等...退房CanDeactivate。

可以停用

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate: () => Promise<boolean> | boolean;
}

@Injectable({ providedIn: 'root' })
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  public canDeactivate(component: CanComponentDeactivate): Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

在此防护中，您必须设置一个组件。这很烦人，但就我而言，我真的很想要它。我来自Ionic 3，需要这些防护，因为Ionic 4没有ionViewCanEnter和ionViewCanLeave。因此，我创建了此保护程序，因此您可以将方法canDeactive()简单地添加到您拥有的每个组件/页面中。简单为ionViewCanLeave。非常棒。但是我也想要CanActivate。

是否可以像使用CanActivate一样使用CanDeactivate？对于激活后卫，我还想在组件/页面中简单使用canActivate()方法。喜欢：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

export interface CanComponentActivate {
  canActivate: () => Promise<boolean> | boolean;
}

@Injectable({ providedIn: 'root' })
export class CanActivateGuard implements CanActivate<CanComponentActivate> {
  public canActivate(component: CanComponentActivate): Promise<boolean> | boolean {
    return component.canActivate ? component.canActivate() : true;
  }
}

就像停用警戒一样。但这是行不通的。

这里有我的 app-routing.module.ts （摘要）

 { path: 'test', canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard], component: TestPage}

测试页

@Component({
  selector: 'app-test-page',
  templateUrl: 'test.page.html',
  styleUrls: ['test.page.scss']
})
export class TestPage {
  public canActivate(): boolean {
    console.log('Sure, come in.');
    return true;
  }

  public canDeactivate(): boolean {
    console.log('Muahahah, never. :P');
    return false;
  }
}

像CanDeactivate

0 个答案: