Angular: Verhindern Route Änderung, wenn Änderungen in der Ansicht vorgenommen

Question

Wenn ich ein Formular in einer Ansicht (Angular). Wenn der Benutzer versucht, sich von dort zu entfernen, und ich möchte, dass eine Bestätigungsmeldung angezeigt wird. Wie kann ich das machen?

Answer 1

Sie können canDeactivate implementieren Typoskript wie

import {Injectable, Inject} from '@angular/core'; 
 
import { CanDeactivate } from '@angular/router'; 
 
import {ViewthatyouwantGuard} from './path to your view'; 
 

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

 
} 
 

 
//hasChanges - function in 'ViewthatyouwantGuard' which will return true or false based on unsaved changes 
 

 
and in your routing file provide root like 
 

 
{path:'rootPath/', component: ViewthatyouwantGuard, canDeactivate:[ConfirmDeactivateGuard]},

Answer 2

CanDeactivate kann dafür verwendet werden. Sie müssen den Status an einen Dienst weitergeben, der für canDeactivate zugänglich ist.