canDeactive | observable keeps its initial value

Question

• Example seen by this example

This is my canDeactivate Guard:

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate, 
  route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }   
}

This is how i call it in Routing for HomeComponent:

{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard]},

In MyService, i have this Subject:

private backButtonEnabled = new BehaviorSubject<boolean>(true);
currentBackButtonEnabled = this.backButtonEnabled.asObservable();

changeCurrentBackButtonEnabled(goBack: boolean){
  this.backButtonEnabled.next(goBack);
}

In another component, the FiltersComponent, i have this function:

openFilters() {
  ...
  this.myService.changeCurrentBackButtonEnabled(false);
}

In HomeComponent, i call the canDeactivate like this:

canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
  this.myService.currentBackButtonEnabled.subscribe(res => {
    console.log(res) //ALWAYS TRUE
  })
  return this.myService.currentBackButtonEnabled;
}

In appModule:

...

  providers: [
    CanDeactivateGuard,
    MyService
  ],

Problem statement:

The currentBackButtonEnabled is always true, even when the user (click) on openFilters() function, where the currentBackButtonEnabled turns to false

Answer 1

I don't fully understand your code, but in your guard

return component.canDeactivate ? component.canDeactivate() : true;

You can't have a variable and a function of the same name in a type script class / Angular Component Class. As such, this line checks for the existence of canActivate--which is always true; because you defined a function by that name on that component.

If component.canDeactivate() exists, then it is executed.

And based on your code:

canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
  return this.service.currentBackButtonEnabled;
}

If the canActivate() method is returning an Observable or Promise then as long as that value is defined, it will be seen as true from a Boolean perspective.

The only situation where this code will return false is if canDeactivate() returns a boolean value of false. If you want to get the results from an Observable or Promise you have to subscribe to it.

Answer 2

You should subscribe to the observable to get its new values.

this.guardService.canDeactivate().pipe(
      catchError(err => {
        this.logger.error('Observable error', err);
        throw err;
      })
    )
      .subscribe((newState) => { // do something }
      });

Also you should inject your service into components, and then broadcast events to the components that should act upon its changes, not the other way around.