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

你应该使用canDeactivate guard

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