Angular 按下浏览器后退按钮后，CanDeactivate防护装置未按预期运行

我已经实现了canDeactive guard，一旦点击浏览器按钮，它就会弹出一个模型并询问是/否。 单击“否”后，它会停留在同一页上，如果再次按下“返回”按钮，弹出窗口就会出现，在单击“否”按钮之后，它将从浏览器历史重定向到空白页URL，而不是停留在同一URL。

请查找停用防护装置的代码

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

export abstract class myCompCanDeactivate {

  abstract  canDeactivate(): boolean;

    @HostListener('window:beforeunload', ['$event'])
    unloadNotification($event: any) {
        if (!this.canDeactivate()) {
            $event.returnValue = true;
        }
    }
}

@Injectable()

export class DeactivateGuardService implements CanDeactivate<myCompCanDeactivate> {
  showDashboard:boolean=false;
  islogout:any;
  sStep:number;
  demoLastSection:number = 0;
  menuitem:SitefinityPortalMenu;

  constructor(private next:ActivatedRoute,private resourceService: ResourceService,
    private matDialog: MatDialog,private browserGlobalService: BrowserGlobalService, private route:Router ){}
  async canDeactivate(component: myCompCanDeactivate,currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Promise<boolean> {

    if(!component.canDeactivate()){

      if (this.browserGlobalService.GlobalLogout=== 'logout') {
          this.browserGlobalService.GlobalLogout = '';
          return true;
        }

      //Get Portal left menus from sitefinity.
      this.menuitem = await this.resourceService.getPortalMenus("Portal_Left_Menu").toPromise();


      var str:SitefinityMenuItem[] = this.menuitem.MenuItems.filter((m)=>{return m.LinkUrl.includes(nextState.url) && m.Hidden===false});

      if ( nextState.url!='/demoSite' && nextState.url === (str.length>0?str[0].LinkUrl:'') ){return true; }

      this.sStep = SaleSteps.Review;
      this.demoLastSection = PSSections.signStep;


      if (this.browserGlobalService.PLSavedSection !=  this.demoLastSection || this.browserGlobalService.PLSavedSection != this.sStep ){
      let modalData = new ModalData();
      modalData.Header = this.resourceService.getViewLabel("ModalHeader_BrowserBack"); 
      modalData.Body = this.resourceService.getViewLabel("ModalBody_BrowserMessage"); 
      modalData.ControlArray = [
        new ButtonAction(this.resourceService.getViewLabel("ModalCancel_Yes"), "YES"),
        new ButtonAction(this.resourceService.getViewLabel("ModalCancel_No"), "NO")
      ];
          let dialogRef = this.matDialog.open(GspModalComponent, {
              data:  modalData
          });
          dialogRef.afterClosed().subscribe(result => {
               if (result && result.toLowerCase() === "yes") {
                  this.browserGlobalService.callComponentMethod("");
                  // this.route.navigated = true;
                  return false;
                }
                return false;
          });
        }
    }
    return false;
  }
}

从'@angular/core'导入{Injectable，HostListener，}；
从“@angular/Router”导入{CanDeactivate，ActivatedRoute，Router，ActivatedRouteSnapshot，RouterStateSnashot}；
:
:
:
:
导出抽象类myCompCanDeactivate{
抽象canDeactivate（）：布尔值；
@HostListener（'window:beforeunload'，['$event']））
unloadNotification（$event:any）{
如果（！this.canDeactivate（））{
$event.returnValue=true；
}
}
}
@可注射（）
导出类DeactivateGuardService实现CanDeactivate{
showDashboard:boolean=false；
islogout：任何；
步骤：编号；
demoLastSection:编号=0；
菜单项：SitefinityPortalMenu；
构造函数（private-next:ActivatedRoute，private-resourceService:resourceService，
私有matDialog:matDialog，私有browserGlobalService:browserGlobalService，私有路由：路由器{}
异步canDeactivate（组件：myCompCanDeactivate，currentRoute:ActivatedRouteSnapshot，currentState:RouterStateSnashot，nextState？：RouterStateSnashot）：承诺{
如果（！component.canDeactivate（））{
if（this.browserGlobalService.GlobalOut==='logout'）{
this.browserGlobalService.GlobalLout=''；
返回true；
}
//从sitefinity获取门户左侧菜单。
this.menuitem=等待这个.resourceService.getPortalMenus（“Portal\u Left\u Menu”）.toPromise（）；
var str:SitefinityMenuItem[]=this.menuitem.MenuItems.filter（（m）=>{return m.LinkUrl.includes（nextState.url）&&m.Hidden==false}）；
如果（nextState.url！='/demoSite'&&nextState.url===（str.length>0？str[0].LinkUrl:''）{return true；}
this.sStep=SaleSteps.Review；
this.demoLastSection=PSSections.signStep；
if（this.browserGlobalService.PLSavedSection！=this.demoLastSection | | this.browserGlobalService.PLSavedSection！=this.sStep）{
设modalData=new modalData（）；
modalData.Header=this.resourceService.getViewLabel（“ModalHeader_BrowserBack”）；
modalData.Body=this.resourceService.getViewLabel（“ModalBody_BrowserMessage”）；
modalData.ControlArray=[
新按钮操作（this.resourceService.getViewLabel（“ModalCancel_Yes”），“Yes”），
新按钮操作（this.resourceService.getViewLabel（“ModalCancel_No”），“No”）
];
让dialogRef=this.matDialog.open（GspModalComponent{
数据：modalData
});
dialogRef.afterClosed（）.subscribe（结果=>{
if（result&&result.toLowerCase（）=“是”）{
this.browserGlobalService.callComponentMethod（“”）；
//this.route.navigated=true；
返回false；
}
返回false；
});
}
}
返回false；
}
}

我找到了这个问题的解决方案。 解决方案：history.pushState（“，”，“/sales”）； （浏览器历史记录中的路由器状态） 在我的例子中，url始终保持不变，因此每当按下浏览器后退按钮时，浏览器都会执行默认活动。因此，它从历史中弹出状态，到达浏览器的最后一个历史状态，然后浏览器导航到空白页。