作为一个解决方案，您可以使用方法canDeactivate创建一些诸如DeactivableComponent之类的接口，然后您应该在必须支持该接口的每个组件中实现该接口。对于您的保护，这必须如下所示：

@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<DeactivableComponent> {
  constructor() {}

  canDeactivate(myComponent: DeactivableComponent ) {
    return myComponent.canDeactivate();
  }
}

一种可能的方法是集中“未保存的更改”状态。您可以使用状态管理工具（如NgRx、Ngxs...）或您自己的系统。例如，您可以在服务中包含以下内容：

private _unsavedChanges = new BehaviorSubject<boolean>(false);
get unsavedChanges() {
  return this._unsavedChanges.asObservable();
}

public setUnsavedChanges(changes: boolean) {
  this._unsavedChanges.next(changes);
}

通过这种方法，每次用户有未保存的更改时都调用setUnsavedChanges(true)，每次用户保存或丢弃更改时都调用setUnsavedChanges(false)，这样，您就可以使用unsavedChanges Observable作为用户是否可以停用路由的核心事实来源。
当然，这意味着您需要记住在状态发生变化时更新状态^^

您可以实现一个跟踪页面更改的服务。
将以下内容添加到您的应用程序组件：

@HostListener('window:beforeunload', ['$event'])
windowBeforeUnload(event: BeforeUnloadEvent) {
    if (this.changesService.hasChanges) {
        event.returnValue = "any value here";
    }
}

如果event.returnValue包含任何值，浏览器将显示以下弹出窗口之一：

或

然后，为了检查用户是否选择了Reload或Leave，将触发以下事件：

@HostListener('window:unload')
windowOnUnload() {
    //User pressed Reload/Leave.
}