Angular 2在路线改变时取消请求

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

@Injectable()
export class CancelableService implements CanDeactivate<any> {
  private cancelSubject: Subject<boolean> = new Subject<boolean>();

  canDeactivate(): Observable<boolean> {
    this.cancelSubject.next(true);
    return this.cancelSubject.asObservable();
  }

  cancel(): void {
    this.cancelSubject.next(true);
  }
}

import { Component } from '@angular/core';
import { CancelableService } from './cancelable.service';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="cancel()">取消请求</button>
  `
})
export class MyComponent {
  constructor(private cancelableService: CancelableService) {}

  cancel(): void {
    this.cancelableService.cancel();
  }
}