Angular CanDeactivate Guard Router with Observable Subscription Value

Question

I am trying to write a canDeactivate protector to check the save state from an observable thread and work accordingly.

My service works like

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

}

My defense goes like

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

  }
}

Basically, it takes the saveState value from the service and returns according to the state, so the canDeactivate router attribute gets a boolean value. Since the value of this.savingState in the guard is always signed, I don’t think there is a problem with the conditional below.

While searching, I came across this answer and tried to make a security code like

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

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

, , , , . , .

, . , .

? (, canDeactivate ), .

Answer 1

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...