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