如何在 Angular 4 中路由到相同的路由并捕获相同的事件? [英] 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']); 的按钮时，这一切都很好，这一切都很好使用 ($('#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 中路由到相同的路由并捕获相同的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！