Angular 2 RC5 在 canDeactivate 中获得预期路线

Question

是否可以在 Angular 2 RC5 路由器的 CanDeactivate 防护中获得预期的路线？我看到有关 CanActivate ( CanActivate ) 的类似问题的答案，但这在 CanDeactivate 防护中似乎不起作用。

我的用例如下:
用户在填写由“FormComponent”服务的表单的过程中单击“主页”链接。 FormComponent 有一个 CanDeactivate 附加到它。我需要知道用户试图专门转到“主页”路线来决定我想在 CanDeactivate 中做什么。检查 CanDeactivate 守卫中的 ActivatedRouteSnapshot 和 RouterStateSnapshot 对象仅显示有关用户当前所在路径的信息，与 FormComponent 相关。虽然我理解这将两个组件耦合在一起，但这只是一个示例，以了解这是否可行。

Answer 1

您可能不需要下一条路由的目标 URL，因为您可以返回 Observable<boolean>到 CanDeactivate()在守卫中。

当我们的守卫被检查时，我们会触发对组件更改的检查并返回 已过滤 回看守卫。 (仅过滤“true”值 - 否则我们将无法继续导航到我们想要的路线!)

当我们的检查通过时，我们可以导航 - 如果没有，我们就不能。

所以我们可能想向我们的用户展示两个按钮。一个跳过保存和导航( doNotSaveAndNavigate() )，另一个跳过保存并继续导航( doSaveAndNavigate() )..或任何其他帮助指导他或她..

some.component.ts

import { Component } from '@angular/core';

// Utils
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable }      from 'rxjs/Observable';

@Component({
  selector: 'selector',
  templateUrl: 'some.component.html'
})
export class SomeComponent {
  // Utils
  youMayNavigateSource = new BehaviorSubject<boolean>(false);
  youMayNavigate$: Observable<boolean> = this.youMayNavigateSource.asObservable();

  checkForUnsavedChanges(): void {
    // Check your form/data for changes...
    let hasSaved: boolean = false;
    // Set the next value for our observable
    this.youMayNavigateSource.next(hasSaved);
  }

  canDeactivate(): Observable<boolean> {
    // Do some checking if we "can deactivate" the current route 
    this.checkForUnsavedChanges();
    // Return an observable so we can change it later on and continue our navigation attempt
    return this.youMayNavigate$.filter(el => el); // (!)
  }

  allowNavigation(): void {
    // Set the next value for our observable to true
    this.youMayNavigateSource.next(true);
  }

  doNotSaveAndNavigate(): void {
    this.allowNavigation();
  }

  doSaveAndNavigate(): void {
    // Save our data
    this.doSave();
    this.allowNavigation();
  }

  doSave(): void {
    // do some fancy saving...
  }
}

can-deactivate-guard.service.ts

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

import { SomeComponent } from './some.component';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<SomeComponent > {
  canDeactivate(component: SomeComponent ) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

(我猜您知道如何为路由器设置 CanDeactivate，但为了完整起见，您将在 official docs 中找到一个用法示例)

仅供引用:如果您只想获得 网址 在 CanDeactivate()失败，订阅router.events并过滤 NavigationCancel像这样的事件:

this.router.events
           .filter(event => event instanceof NavigationCancel)
           .subscribe(el => console.log('Requested URL:', el.url));

您可能需要导入:

import { Router, NavigationCancel } from '@angular/router'; 
import 'rxjs/add/operator/filter';

并添加 router给你的构造函数:

  constructor(private router: Router) { }