如何router.navigate到Angular 4中的相同路线并捕获相同的事件？

Question

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

1. 我正在开发一个有/en/register路线的应用程序.当我在根部并且单击一个按钮时,this.router.navigate([this.routeParams.lang, 'register']);这一切都很好,并且一切都很好,这会在构造函数(或ngOnInit,无论如何)中打开一个模态($('#modalRegister') as any).modal('show');.

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

2. 在同一个应用程序中,我有一个按钮,可以进行搜索并将一些标记放在地图中(in /en/search/blah).如果我在索引页面或更改搜索查询,这一切都很好.但是,如果用户在其他地方拖动地图并希望将相同的标记再次居中,我也会这样做this.router.navigate(['search', this.searchQuery]);,如果它最终是相同的路线(例如,单击两次搜索按钮),它就不会做任何事情.

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

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

任何意见是极大的赞赏.谢谢!

Answer 1

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

我使用了"this.router.navigate"返回一个promise的事实.所以我在其他地方航行,然后返回.它有点难看,但它有效,UI不受影响:

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

希望能帮助到你.

Answer 2

对于情况 1，

为什么导航到新路线只是为了打开模式。只需在与函数调用相同的路线上进行即可。如果您想移动到新路线，则可以再次调用this.router.navigate("/")模态关闭事件。

对于情况2，希望这会起作用。

currentSearchQuery: string;

ngOnInit() {
  this.route.paramMap
    .switchMap((params: ParamMap) => {
        this.currentSearchQuery = params.get('searchQuery');
        updateMarkers();
      });

}