如何在 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. 在同一个应用程序中，我有一个按钮，用于搜索并在地图中居中一些标记（/en/search/blah）。如果我在索引页面 或 如果我更改搜索查询，这一切都很好。但是，如果用户将地图拖到其他地方并希望将相同的标记再次居中，我也会这样做this.router.navigate(['search', this.searchQuery]);，如果它最终是同一条路线（例如，单击搜索按钮两次）它不会这样做任何东西。

虽然我同意这很好，所以如果 URL 没有改变，组件不会被重新创建，但这是一个糟糕的设计，因为在 UI-router 中你可以做同样的事情并且它会工作（就我而言记得）。

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

非常感谢任何建议。谢谢！

Answer 1

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

我使用了“this.router.navigate”返回一个承诺这一事实。 所以我导航到其他地方，然后返回。有点难看，但它可以工作，并且 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();
      });

}

Answer 3

只需在路由末尾添加虚拟参数 /en/register/jk2h4-42hj-234n2-234dfg 或查询参数如 /en/register?val=jk2h4-42hj-234n2-234dfg

调用同一路由时改变参数值。所以浏览器知道 URL 变化和 Angualr 组件从整个生命周期开始工作。

Answer 4

我使用这个解决方法

this.router.navigate(['path']).then(()=>  {window.location.reload();});