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

Question

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

我的第一种方法是：

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

现在我正在尝试使用CanDeactivate守卫（以这个 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

你应该使用canDeactivate警卫

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