![](/img/trans.png)
[英]How to listen for Angular 2 native page change event and prevent default?
[英]Angular: how to prevent default router event
在我的应用程序组件中,我正在检查路线改变时是否有任何打开的模式。 在这种情况下,我想
如果有一个打开的模式,我已经成功关闭了模式,但是我找不到使用类似“event.preventDefault()”之类的方法
export class AppComponent implements OnInit, OnDestroy {
private routerEventSubscription : Subscription;
constructor (
private router: Router,
private modalService: NgbModal
) { }
ngOnInit(): void {
this.routerEventSubscription = this.router.events.pipe(
filter( event => event instanceof NavigationStart ),
pairwise()
).subscribe( event => {
console.log(event);
if (this.modalService.hasOpenModals()) {
this.modalService.dismissAll();
/*** ==> Here I want to prevent the route from changing <== ***/
}
})
}
ngOnDestroy () {
this.routerEventSubscription.unsubscribe();
}
}
路由器事件不会帮助您阻止导航,因为它们只是让您知道正在发生的事情的一种手段,为了防止用户离开他们所在的当前路线,您需要使用路线的canDeactivate
属性。
你可以在这里查看官方文档: https://angular.io/api/router/CanDeactivate
你可以在网上找到这样的例子/解释: https://www.concretepage.com/angular-2/angular-candeactivate-guard-example
基本上,您创建一个实现CanDeactivate
接口的守卫,并将该守卫分配给您希望用户离开的应用程序中的所有路由,并在守卫本身中实现您需要的逻辑(您获得当前组件并可以使用它来实现您的逻辑,或者您甚至可以忽略它并使用一些共享服务或您想要的任何东西)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.