Angular 可以使用可观察的订阅值停用 Router Guard

Question

我一直在尝试编写一个 canDeactivate 守卫来检查来自可观察流的保存状态并相应地工作。

我的服务是这样的

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs/ReplaySubject';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class EditModelService {

  private savingModelDataSource = new ReplaySubject<boolean>();

  savingModelData$ = this.savingModelDataSource.asObservable();

  public setSavingModelData(state: boolean) {
    this.savingModelDataSource.next(state);
  }

}

我的守卫

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

import { Observable } from 'rxjs/Observable';

import { EditModelService } from './edit-model.service';

@Injectable()
export class EditModelCanDeactivateGuardGuard {
  private savingState: boolean;

  constructor(
    private editModelService: EditModelService
  ) { }

  CanDeactivate(
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {

    this.editModelService.savingModelData$.subscribe(saving => {
      this.savingState = saving;
    });


    if (this.savingState) {
      return this.editModelService.savingModelData$.first();
    } else {
      return this.editModelService.savingModelData$.first();
    }

  }
}

基本上，它从服务中获取 savingState 的值，并根据状态获取 returns，因此路由器的 canDeactivate 属性接收一个布尔值。由于守卫中的值 this.savingState 总是被订阅，我认为下面的条件没有问题。

通过一些搜索，我遇到了这个并尝试将守卫代码设为

return this.editModelService.savingModelData$.first();

当然，我在这里导入了 first() 作为 import 'rxjs/add/operator/first';。

它 returns 是警卫观察到的，只是为了看看它是否工作正常，或者这是否与我返回的方式有关。但是，在这两种情况下，我都会收到如下图所示的错误。

我在导入路由器配置的模块中提供了路由器守卫。这也是提供服务的地方。

我在这里做错了什么？我不熟悉使用路由器防护（尤其是 canDeactivate 和 observable），感谢任何帮助。

Answer 1

您的 Guard 服务必须实现功能才能完全实现 CanActivate 或 CanDeactivate 接口。尝试更改为

来自

@Injectable()
export class EditModelCanDeactivateGuardGuard {

到

@Injectable()
export class EditModelCanDeactivateGuardGuard  implements CanActivate, CanDeactivate<boolean>{

你的CanDeactivate也应该改成canDeactivate

 canDeactivate() {

 }

尝试解决方案后更新：

另外，改变

来自

canDeactivate(
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean ...

到

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean...

Angular 可以使用可观察的订阅值停用 Router Guard

Angular CanDeactivate Router Guard with an Observable Subscribed Value

angular

rxjs

observable

angular-router

angular-router-guards