我有另一个办法，试一次-
首先创建一个名为confirmation.guard.ts的保护文件-

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';

export interface CanComponentCanDeactivate {
confirm: () => boolean;
}

@Injectable()
export class ConfirmationGuard implements 
CanDeactivate<CanComponentCanDeactivate> {
canDeactivate(
component: CanComponentCanDeactivate,
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean>| boolean{ 
  return component.confirm();
 }
}

然后在app.module.ts中导入ConfirmationGuard

import { ConfirmationGuard } from './guards/confirmation.guard';
@NgModule({
 providers: [ConfirmationGuard]
})
export class AppModule { }

在定义了组件工艺路线的工艺路线模块文件中-使用此ConfirmationGuard，在该组件上显示警报弹出窗口-

import { ConfirmationGuard } from './guards/confirmation.guard';

   const routes: Routes = [
   { path: 'your-path', component: YourComponent, canDeactivate: 
   [ConfirmationGuard] },
   ];

  @NgModule({
  providers: [ConfirmationGuard ],
  imports: [],
  exports: [RouterModule]
 })
 export class YourRoutingModule { }

然后实现CanComponentCanDeactivate，您希望在哪个组件中显示弹出窗口-

import { CanComponentCanDeactivate } from '../../../guards/confirmation.guard';
 
 export class YourComponent implements CanComponentCanDeactivate {
 successRedirect: boolean = false;

 //call confirm() function which have created in guard file
 confirm() {
   if (!this.successRedirect) {
     return confirm("Are you sure you want to navigate away ?")
   }
   else{
      return true;
   }
 }
}

我希望它会有所帮助。