Angular 2 - 如果页面被触摸，则在离开页面之前提醒用户

Question

我们有要求，如果页面被触摸，我们必须提醒用户，如果使用选择不同的菜单应用程序，如果用户继续继续，则应该显示是或否的警报，那么只有重定向应该发生，否则它应该回退到同一页面。我们已经尝试使用 ngOnDestroy，但是应用程序正在重定向到下一页而不显示警报。

我的第一个方法是：

 ngOnDestroy()
{        
    this.touched = this.eventForm.touched;
    if (this.touched)
        this.display = true;
}

现在我正在尝试使用CanDeactivate 守卫（请参阅this plunker 的示例）：

import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { SidebarComponent } from './shared/sidebar/sidebar.component'; 

@Injectable() 
export class ConfirmDeactivateGuard implements CanDeactivate<SidebarComponent> {
     canDeactivate(target: SidebarComponent) { 
          if (target.hasChanges()) { 
               return window.confirm('Do you really want to cancel?'); 
          } 
          return true; 
      } 
}

Answer 1

你应该使用canDeactivateguard

https://angular.io/api/router/CanDeactivate

https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { SidebarComponent } from './shared/sidebar/sidebar.component'; 

@Injectable() 
export class ConfirmDeactivateGuard implements CanDeactivate<SidebarComponent> {
     canDeactivate(target: SidebarComponent) { 
          if (target.hasChanges()) { 
               return window.confirm('Do you really want to cancel?'); 
          } 
          return true; 
      } 
}

参考示例@plnkr http://plnkr.co/edit/sRNxfXsbcWnPU818aZsu?p=preview