Angular CanDeactivateGuard onPopState event is not firing properly

Question

I am using canDeactivateGuard to check if the user has made any changes in the input box and if they have made changes then the canDeactivateGuard will trigger the Alert box to the user.

In my application i am having a custom back button as well when the user presses the custom back button the onPopState triggers properly but when the user clicks the browser back button the popstate triggers sometimes and sometimes it doesn't triggers which results in not showing the alert box.

I have checked whether the router events are called when the browser back button is pressed.But whenever the onPopState is not fired then at that time the router events is also not triggered.

Does anyone has faced the issue like this

Here is my canDeactivateGuard

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

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

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  backButtonClicked = false;
  constructor(public location: LocationStrategy) {
    location.onPopState(() => {
      console.log('location popstate got called', location);
      this.backButtonClicked = true;
      return false;
    });
  }

  canDeactivate(component: CanComponentDeactivate) {
    if (this.backButtonClicked) {
      this.backButtonClicked = false;
      history.pushState(null, null, location.href);
    }
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

Component where the Guard is invoked

canDeactivate() {
    if (this.bridgeInterfaceForm.dirty) {
      const message = `${this.globalTranslate.getTranslation('SHARED.DISCARD')}`;
      return this.compWindow.confirm(message);
    }
    return true;
  }

Answer 1

等待大神答复