Angular CanDeactivate Router Guard具有可观察的订阅值 [英] Angular CanDeactivate Router Guard with an Observable Subscribed Value

问题描述

我一直在尝试编写canDeactivate防护措施，以从可观察的流中检查保存状态并相应地工作.

I've been trying to write a canDeactivate guard to check a saving state from an observable stream and work accordingly.

我的服务就这样

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();
    }

  }
}

基本上，它从服务中获取saveState的值，并根据状态返回，因此路由器的canDeactivate属性接收一个布尔值. 由于警卫队中的this.savingState值始终是预订的，因此我认为下面的条件语句没有问题.

Basically, it takes the value of the savingState from the service and returns according to the state so the router's canDeactivate attribute receives a boolean. Since the value this.savingState in the guard is always subscribed I don't think there is an issue with the conditional goes below.

通过一些搜索，我遇到了这个答案，并尝试以

With some search I came across this answer and tried doing the guard code as

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

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

Of course, I've imported first() here as import 'rxjs/add/operator/first';.

它从守卫那里返回一个可观察到的东西，只是看它是否工作正常，或者是否与我返回的方式有关.但是，在两种情况下，都会出现如下图所示的错误.

It returns an observable from the guard just to see whether that is working fine or if that is something to do with the way I am returning. But, in both of the scenarios, I get the error as shown in the image below.

我已经在导入路由器配置的模块内部提供了路由器防护.这也是提供服务的地方.

I've provided the router guard inside the module where the router configuration is imported. That's where the service is provided as well.

我在这里做什么错了?我是路由器防护的新手(尤其是canDeactivate可以观察到)，可以提供任何帮助.

What am I doing here wrong? I am new to using router guards(especially, canDeactivate with an observable) and any help is appreciated.

推荐答案

您的Guard Service必须实现功能以完全实现该 CanActivate或CanDeactivate 接口.尝试更改为

Your Guard Service must implement function to fully implement that CanActivate or CanDeactivate interface. Try changing as

发件人

@Injectable()
export class EditModelCanDeactivateGuardGuard {

收件人

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

您的 CanDeactivate 也应更改为 canDeactivate

also your CanDeactivate should be changed to canDeactivate

 canDeactivate() {

 }

尝试解决方案后已更新:

还可以更改

发件人

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

收件人

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

这篇关于Angular CanDeactivate Router Guard具有可观察的订阅值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！