typescript Angular ,检测导航离开时未保存的更改并确认离开或停留

ukxgm1gy  于 2022-11-18  发布在  TypeScript
关注(0)|答案(3)|浏览(169)

我正在尝试在Angular中实现未保存的更改确认。我知道我应该使用CanDeactivate guard,但我不知道如何尽可能通用地实现它,所以我可以对每个组件使用它,而不仅仅是一个。
我尝试创建以下guard,它只适用于传递的组件:

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

  canDeactivate(myComponent: MyComponent) {
    return !myComponent.form.dirty;
  }
}

任何帮助,请将它转换为通用的后卫,使我可以使用它的所有组件与形式?

rsaldnfx

rsaldnfx1#

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

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

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

k7fdbhmy2#

一种可能的方法是集中“未保存的更改”状态。您可以使用状态管理工具(如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作为用户是否可以停用路由的核心事实来源。
当然,这意味着您需要记住在状态发生变化时更新状态^^

svgewumm

svgewumm3#

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

@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.
}

相关问题