Question

好的，我的问题有两个用例：

我正在开发一个具有/en/register路由的应用程序。当我在根部并点击一个this.router.navigate([this.routeParams.lang, 'register']);的按钮并且一切都很好时，这一切都很好用，这会在构造函数（或ngOnInit，无论如何）中打开一个带有($('#modalRegister') as any).modal('show');的模态。< / p>
这一切都很好，但是如果我关闭模态，路线仍然是/en/register/（是的，我可以转到/en，但在建议之前看看用例＃2，所以当我点击按钮时，它什么也没做。无法调用构造函数或ngOnInit，甚至 route.params.subscribe（）或 route.url.subscribe（）（我认为他们应该......）。
在同一个应用程序中，我有一个按钮可以进行搜索并将一些标记放在地图中（/en/search/blah）。如果我在索引页面或，如果我更改搜索查询，这一切都很好。但是，如果用户将地图拖到其他地方并希望将相同的标记再次居中，我也会this.router.navigate(['search', this.searchQuery]);并且如果它最终是相同的路线（例如，单击两次搜索按钮）它就不会做任何事情。

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

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

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

Answer 1

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

我使用的事实是＆＃34; this.router.navigate＆＃34;返回一个承诺。所以我在其他地方航行，然后返回。它有点难看，但它有效，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

只需在route / 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();});

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

4 个答案: