如何在Angular 4中将router.navigate到相同的路由并捕获相同的事件？ [英] How to router.navigate to same route in Angular 4 and catch the same event?

问题描述

好的，我在这里有两个用例：

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

1. 我正在处理的应用程序具有 / en / register 路线。当我位于根目录下并单击执行 this.router.navigate（[this.routeParams.lang，'register']）; 的按钮时，一切都很好一切都很好，这在构造函数中打开了一个模态（无论如何还是ngOnInit），其中（$（'＃modalRegister'）为任何））。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返回承诺的事实。
所以我导航到其他地方，然后返回。这有点丑陋，但可以正常使用，并且用户界面不受影响：

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中将router.navigate到相同的路由并捕获相同的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！