如何在 Angular 4 中路由到相同的路由并捕获相同的事件?

How to router.navigate to same route in Angular 4 and catch the same event?(如何在 Angular 4 中路由到相同的路由并捕获相同的事件?)
本文介绍了如何在 Angular 4 中路由到相同的路由并捕获相同的事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好的,我的问题有两个用例:

Okay, I have two use cases for my question here:

  1. 我正在开发一个具有 /en/register 路由的应用程序.当我处于根目录并单击执行 this.router.navigate([this.routeParams.lang, 'register']); 的按钮时,这一切都很好,这一切都很好使用 ($('#modalRegister') as any).modal('show');.

  1. I'm working on an application which has a /en/register route. It all works good when I'm at the root and I click a button that does this.router.navigate([this.routeParams.lang, 'register']); and it's all good, this opens up a modal in the constructor (or ngOnInit, anyways) with ($('#modalRegister') as any).modal('show');.

一切正常,但如果我关闭模式,路线仍然是 /en/register/ (是的,我可以让它转到 /en 但请参阅在你建议这个之前的用例#2),所以当我点击按钮时,它什么都不做.构造函数或 ngOnInit 都没有被调用,甚至 route.params.subscribe()route.url.subscribe() (我认为他们应该...).

It all works good, but if I close the modal, the route is still /en/register/ (yeah I can make it go to /en but see the use case #2 before you suggest this), so when I click the button, it doesn't do anything. Neither the constructor or ngOnInit are being called, not even route.params.subscribe() or route.url.subscribe() (which I think they should...).

在同一个应用程序中,我有一个按钮,用于执行搜索并在地图中将一些标记居中(在 /en/search/blah 中).如果我在索引页面 如果我更改搜索查询,这一切都很好.但是,如果用户将地图拖到其他地方并希望将相同的标记再次居中,我也会这样做 this.router.navigate(['search', this.searchQuery]); 如果它最终是同一条路线(例如,单击搜索按钮两次)它什么也没做.

In the same application, I have a button that does a search and centers some markers in a map (in /en/search/blah). That's all good if I'm in the index page or if I change the search query. However, if the user drags the map somewhere else and wants to have the same markers centered again, I also do this.router.navigate(['search', this.searchQuery]); and if it ends up being the same route (click the search button twice, for instance) it doesn't do anything.

虽然我同意这很好,所以如果 URL 没有改变,组件不会被重新创建,但这是一个糟糕的设计,因为在 UI-router 中你可以做同样的事情并且它会工作(就我而言记得).

While I agree it's good so the components don't get recreated if the URL hasn't changed, this is a bad design because in UI-router you could do the same thing and it'd work (as far as I can remember).

那么,在 Angular 4 中,当告知要导航到相同的 URL 时,如何在路由组件的构造函数/ngOnInit 中运行相同的代码?或者我如何检测 URL 是否相同并采取相应措施?(虽然我仍然认为这是糟糕的设计,但无论如何......).

So, in Angular 4, how do I run the same code in the constructor/ngOnInit of the route's component when the same URL is being told to be navigated to? or how do I detect if the URL is the same and act accordingly? (although I still think it's bad design, but anyway...).

非常感谢任何建议.谢谢!

Any advice is greatly appreciated. Thanks!

推荐答案

当我需要重新加载"当前组件的构造函数和 ngOnInit 函数时,我找到的唯一解决方案是一种解决方法:

When I needed to "reload" the current component's constructor and ngOnInit functions, the only solution I found was kind of a workaround:

我使用了this.router.navigate"返回一个承诺这一事实.所以我导航到其他地方,然后返回.这有点难看,但它可以工作,并且 UI 不受影响:

I used the fact that "this.router.navigate" returns a promise. So I navigated somewhere else, and returned. It's a bit ugly but it works and the UI is not affected:

this.router.navigate(..[somewhere else]..)
    .then(()=>{this.router.navigate(..back..)})

希望对你有帮助.

这篇关于如何在 Angular 4 中路由到相同的路由并捕获相同的事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)