Question

如何防止在Angular 2中表单变脏时关闭浏览器选项卡？

我的html正文包含一个组件：

  <body>
    <my-app>Loading, please wait...</my-app>
  </body>

包含路由器导航和路由器插座：

<nav>
 (...)
</nav>
<router-outlet></router-outlet>

当路由器导航到编辑页面时，我在那里有一些表格：

  <form #myForm="ngForm">
    <button pButton type="text" label="Save" (click)="onSave()" [disabled]="!myForm.valid || myForm.pristine"></button>
  </form>

现在，如果表单不是'pristine'，我想在用户尝试关闭浏览器标签时要求确认：

window.onbeforeunload = function() {
   if (form.dirty) {
     return "You have unsaved data changes. Are you sure to close the page?"
   }
}

如何从那里以规范的方式访问Angular形式的脏状态？我可以在每个字段上注册一个事件来更改字段并设置全局脏标志，但是我必须将该代码放在每个导航的每个导航上，然后维护该代码以使消息保持一致。有没有其他方法可以检查页面上是否存在角度形式，处于脏状态？

Answer 1

也许

@HostListener('window:beforeunload', ['$event'])
handleBeforeUnload(event) {
  if (connected) {
    return "You have unsaved data changes. Are you sure to close the page?"
  }
}

Answer 2

尝试此指令https://github.com/extremeprog-com/ng-prevent-navigation。

所以它应该很简单

R: !!opencv-matrix
   rows: 3
   cols: 3
   dt: d
   data: [ 8.8138908449290321e-01, -1.2148825396001222e-02,
       -4.7223478035640226e-01, 1.5998657939736358e-02,
       9.9986345265635612e-01, 4.1375096662294207e-03,
       4.7212003206905900e-01, -1.1201878574967093e-02,
       8.8146309805657919e-01 ]
T: !!opencv-matrix
   rows: 3
   cols: 1
   dt: d
   data: [ 1.5773673401082249e+01, 4.2836222925900280e-02,
       5.0227833287859989e+00 ]
R1: !!opencv-matrix
   rows: 3
   cols: 3
   dt: d
   data: [ 9.8312585634867622e-01, -1.2387599744347073e-02,
       -1.8251054202773007e-01, 1.2955703518228558e-02,
       9.9991422663040130e-01, 1.9207104087663354e-03,
       1.8247109449178447e-01, -4.2528525368786835e-03,
       9.8320202040082783e-01 ]
R2: !!opencv-matrix
   rows: 3
   cols: 3
   dt: d
   data: [ 9.5285471898202379e-01, 2.5876469050964915e-03,
       3.0341586741168125e-01, -1.6357939454294122e-03,
       9.9999291182572214e-01, -3.3912352442119049e-03,
       -3.0342249206651850e-01, 2.7350286667662269e-03,
       9.5285219783885455e-01 ]
P1: !!opencv-matrix
   rows: 3
   cols: 4
   dt: d
   data: [ 4.0573853248682479e+02, 0., 2.5764449977874756e+02, 0., 0.,
       4.0573853248682479e+02, 2.3996722984313965e+02, 0., 0., 0., 1.,
       0. ]
P2: !!opencv-matrix
   rows: 3
   cols: 4
   dt: d
   data: [ 4.0573853248682479e+02, 0., 2.5764449977874756e+02,
       6.7166452242782234e+03, 0., 4.0573853248682479e+02,
       2.3996722984313965e+02, 0., 0., 0., 1., 0. ]
Q: !!opencv-matrix
   rows: 4
   cols: 4
   dt: d
   data: [ 1., 0., 0., -2.5764449977874756e+02, 0., 1., 0.,
       -2.3996722984313965e+02, 0., 0., 0., 4.0573853248682479e+02, 0.,
       0., -6.0407914805478774e-02, 0. ]

Answer 3

添加一个Hostlistener装饰器。如果表单上有未保存的更改，则会出现确认对话框。

@HostListener('window:beforeunload', ['$event'])
handleBeforeUnload(event: Event) {
    event.returnValue = false;
}

Answer 4

这有效。相应地实现hasUnsavedData()功能。

  hasUnsavedData(){
    return this.myForm.dirty;
  }

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

Answer 5

只需使用Jquery获取ng-form的状态。

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHandler(event) {
   if($('form').hasClass('ng-touched')) { //You can check with ng-dirty based on your requirements.
        let confirmMessage = 'You have unsaved data changes. Are you sure to close the page?'
        event.returnValue = confirmMessage;
        return confirmMessage;
   }

}

在我的情况下，如果触摸了form，我只会显示警告对话框。

在Angular 2中表单变脏时阻止关闭浏览器选项卡

5 个答案: