如何在 Angular 4 中路由到相同的路由并捕获相同的事件?
好的,我的问题有两个用例:
Okay, I have two use cases for my question here:
我正在开发一个具有
/en/register
路由的应用程序.当我处于根目录并单击执行this.router.navigate([this.routeParams.lang, 'register']);
的按钮时,这一切都很好,这一切都很好使用($('#modalRegister') as any).modal('show');
.
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 doesthis.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..)})
希望对你有帮助.
相关文章