在编辑 Angular 2 时确认用户更改路线而不保存详细信息答案

【问题标题】：Confirm User to Change Route without saving details while editing Angular 2在编辑 Angular 2 时确认用户更改路线而不保存详细信息
【发布时间】：2017-11-05 22:13:32
【问题描述】：

如果用户正在编辑某些内容并尝试更改路线而不保存详细信息。

在这种情况下，我想更改用户“您的更改未保存是否要离开”。根据用户我们可以防止组件破坏组件。

我在 ngOnDestroy 方法运行之前尝试了一个守卫但守卫运行。所以我该怎么做？

【问题讨论】：

路线如何变化？点击按钮？
@Thiagz 路由可以从导航栏从标题组件或浏览器的后退或前进按钮进行更改。如果详细信息或未以任何形式保存在任何组件中，我不希望用户导航或销毁组件
为什么不用onclick事件来触发你需要的消息呢？

标签： javascript angular routes router

【解决方案1】：

我已将 CanDeactivate 用于相同的功能，并且效果很好。

【讨论】：

你能解释一下多个组件吗？
你所要做的就是为你想要实现的所有路由添加 , canDeactivate: [YourDeactivateGuard] 。在您的 CanDeactivateGuard 中执行以下操作：@Injectable() export class DeactivateGuard implements CanDeactivate<any> { canDeactivate(component: any) { //Return True or false as per condition } return true; } }
守卫只开火一次。虽然从子级导航到父级 Gaurd 不会触发
如果您为每个父/子组件使用单独的路由，那么每当您尝试导航离开时，我都会触发。
是的，但是在浏览浏览器的后退按钮时，Gaard 不会触发

【解决方案2】：

在离开当前路由之前触发路由器的NavigationStart做工作。

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

【讨论】：

【解决方案3】：

您可以为此目的使用 Angular CanDeactivate。

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

也是一个工作示例@ https://rahulrsingh09.github.io/AngularConcepts/

AdvancedConcepts -> 守卫

【讨论】：

它应该可以显示您正在尝试的代码或相同的 plunker 吗？
export class EditorGuard implements CanDeactivate<any> { constructor(private customEmitterService: CustomEmitterService) { } canDeactivate(component: any, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot) { if (this.customEmitterService.isEditing) { let confirm: boolean = window.confirm('text'); if (confirm) { this.customEmitterService.isEditing = false; return true } else { return false; } } else { return true; } } }
这里是 CanActivate Guard - export class EditorGuard implements CanActivate { constructor(private customEmitterService: CustomEmitterService) { } canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { if (this.customEmitterService.isEditing) { let confirm: boolean = window.confirm('text'); if (confirm) { this.customEmitterService.isEditing = false; return true } else { return false; } } else { return true; } } }
我创建的两个以上的Guard
@ErSushil 如果您导航到链接 rahulrsingh09.github.io/AngularConcepts 并单击高级选项卡中的警卫并单击返回，您将在控制台中找到它的打印我正在导航，并且还会弹出一个 disacrd 更改工作正常