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

Question

如果使用页面，我们有要求提醒用户的位置，如果使用选择不同的菜单应用程序，应该用Yes或Yes显示提醒，如果用户继续进行应该发生重定向，否则应该回到同一页面。我们尝试过使用ngOnDestroy，但应用程序正在重定向到下一个页面而没有显示Alert。

我的第一种方法是：

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后卫

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