确认用户在编辑Angular 2时无需保存详细信息即可更改路线

Question

If the user is editing something and try to change the route without saving details.

in this condition I want to alter the user that 'your changes are not saved do you want to go away'. according to the user can we prevent component to destroy the component.

I try a guard but guard run before ngOnDestroy method run. So what should I do?

Answer 1

我已经使用CanDeactivate来实现相同的功能，并且效果很好。

Answer 2

trigger NavigationStart of Router to do jobs before leaving current route.

constructor(private router: Router) {
  ..
  this.router.events.forEach((e: any) => {
    if (e instanceof NavigationStart) {
      // do confirm here.
    }
  });
}

Answer 3

You can use angular CanDeactivate for this purpose .

Link of canDeactivate Angular

https://angular.io/docs/js/latest/api/router/index/CanDeactivate-interface.html https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

Also a working example @ https://rahulrsingh09.github.io/AngularConcepts/

AdvancedConcepts - > guards