[英]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: 好的,我的问题有两个用例:
I'm working on an application which has a /en/register
route. 我正在开发一个具有
/en/register
路由的应用程序。 It all works good when I'm at the root and I click a button that does this.router.navigate([this.routeParams.lang, 'register']);
当我在root时我点击一个执行
this.router.navigate([this.routeParams.lang, 'register']);
的按钮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');
这一切都很好,这在构造函数(或者ngOnInit,无论如何)中打开了一个模态
($('#modalRegister') as any).modal('show');
. 。
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. 这一切都很好,但如果我关闭模态,路由仍然是
/en/register/
(是的,我可以让它转到/en
但是在建议之前看到用例#2),所以当我点击按钮,它没有做任何事情。 Neither the constructor or ngOnInit are being called, not even route.params.subscribe() or route.url.subscribe() (which I think they should...). 没有调用构造函数或ngOnInit, 甚至没有调用route.params.subscribe()或route.url.subscribe() (我认为它们应该......)。
In the same application, I have a button that does a search and centers some markers in a map (in /en/search/blah
). 在同一个应用程序中,我有一个按钮,可以进行搜索并将一些标记放在地图中(在
/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]);
但是,如果用户将地图拖到其他地方并希望将相同的标记再次居中,我也会这样做
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. 如果它最终是相同的路线(例如,单击两次搜索按钮)它不会做任何事情。
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). 虽然我同意它是好的,所以如果URL没有改变,组件不会被重新创建,这是一个糟糕的设计,因为在UI路由器中你可以做同样的事情并且它工作(据我记得) 。
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? 那么,在Angular 4中,当告诉导航到相同的URL时,如何在路由组件的构造函数/ ngOnInit中运行相同的代码? or how do I detect if the URL is the same and act accordingly?
或者如何检测URL是否相同并采取相应措施? (although I still think it's bad design, but anyway...).
(虽然我仍然认为这是糟糕的设计,但无论如何......)。
Any advice is greatly appreciated. 任何意见是极大的赞赏。 Thanks!
谢谢!
When I needed to "reload" the current component's constructor and ngOnInit functions, the only solution I found was kind of a workaround: 当我需要“重新加载”当前组件的构造函数和ngOnInit函数时,我发现的唯一解决方案是一种解决方法:
I used the fact that "this.router.navigate" returns a promise. 我使用了“this.router.navigate”返回一个promise的事实。 So I navigated somewhere else, and returned.
所以我在其他地方航行,然后返回。 It's a bit ugly but it works and the UI is not affected:
它有点难看,但它有效,UI不受影响:
this.router.navigate(..[somewhere else]..)
.then(()=>{this.router.navigate(..back..)})
Hope it helps. 希望能帮助到你。
For case 1, 对于案例1,
Why do you navigate to a new route just to open a modal. 为什么要导航到新路线只是为了打开模态。 Just do it being at the same route with a function call.
只需使用函数调用在同一路径上。 If you want to move to a new route then you can again call
this.router.navigate("/")
in modal close event. 如果要移动到新路线,则可以再次在模态关闭事件中调用
this.router.navigate("/")
。
For case 2, Hope this will work. 对于案例2,希望这将有效。
currentSearchQuery: string;
ngOnInit() {
this.route.paramMap
.switchMap((params: ParamMap) => {
this.currentSearchQuery = params.get('searchQuery');
updateMarkers();
});
}
Just add dummy parameter at the end of the route /en/register/jk2h4-42hj-234n2-234dfg or query parameter like /en/register?val=jk2h4-42hj-234n2-234dfg 只需在route / en / register / jk2h4-42hj-234n2-234dfg的末尾添加dummy参数,或者在/ en / register中添加查询参数?val = jk2h4-42hj-234n2-234dfg
change the parameter value when calling the same route. 调用相同路由时更改参数值。 So browser knows that URL change and Angualr component start to work from full life cycle.
因此浏览器知道URL更改和Angualr组件从完整生命周期开始工作。
我使用这个解决方法
this.router.navigate(['path']).then(()=> {window.location.reload();});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.