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

如果用户正在编辑某些内容并尝试在不保存详细信息的情况下更改路线。在编辑Angular 2时确认用户更改路线而不保存详细信息

在这种情况下，我想改变用户'您的更改没有保存，你想离开'。根据用户可以防止组件破坏组件。

在ngOnDestroy方法运行之前，我尝试了一个守卫但是跑卫。那我该怎么办？

来源

2017-06-05 Er Sushil

怎样的路线变化？点击按钮？ – Thiagz

@Thiagz路线可以从导航栏从标题组件或浏览器的后退或前进按钮中更改。我不希望用户浏览或销毁组件，如果详细信息或未以任何形式保存在任何组件中 –

为什么不使用onclick事件触发所需的消息？ – Thiagz

我已经使用CanDeactivate为相同的功能，它工作得很好。

来源

2017-06-05 07:45:08

你能解释多个组件吗？ –

所有你需要做的就是添加，canDeactivate：[YourDeactivateGuard]你想实现它的所有路由。在你CanDeactivateGuard做这样的事情： '@Injectable（）出口类DeactivateGuard实现CanDeactivate { canDeactivate（成分：任意）{// 返回true或false按条件 } 回归真实; } }' –

守卫只射击一次。虽然从孩子到父母Gaurd的导航不会触发 –

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

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

来源

2017-06-05 07:50:01 Pengyy

您可以使用角CanDeactivate来达到此目的。 canDeactivate的

链接角

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

来源

2017-06-05 08:01:16

在浏览器的后退按钮上单击Gaurd不起作用 –

它应该能显示您正在尝试的代码还是显示相同的重新启动的代码？ –

'出口类EditorGuard实现CanDeactivate { 构造（私人customEmitterService：CustomEmitterService）{} canDeactivate（成分：任何，currentRoute：ActivatedRouteSnapshot，currentState：RouterStateSnapshot）{ 如果（this.customEmitterService.isEditing）{ 让利确认：布尔= window.confirm（'text'）;如果（确认）{ this.customEmitterService。isEditing = false; return true } else { return false; } } else { return true; }} } ' –

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

回答

相关问题