Angular 2路由到同一组件

Posted 2023-02-22

【中文标题】Angular 2路由到同一组件

【英文标题】：Angular 2 route to same component

【发布时间】：2017-01-13 02:20:09

【问题描述】：

我已将 Angular 2 从使用标记为“deprericated”的路由器升级，并开始在 rc5 和 rc6 中使用“新”路由器。但是现在我遇到了一个问题（从 rc5 开始，在 rc6 中仍然相同），其中有一个组件需要导航到相同的组件但具有不同的参数（要获取其他数据，然后是视图中的数据，基于关于参数）。

在废弃的路由器中，每次使用 this.router.navigate 导航到组件时都会调用构造函数和 AfterViewInit 等。在新的路由器中，构造函数和其他东西在一个接一个地调用同一个组件时不会被调用。所以我想发生了某种“魔法”/缓存。另请注意，我在组件中发送了一个必需参数和一些可选参数，因此链接看起来像这样：http://localhost:2222/mycomponent/1;someotherparam=123

有什么方法可以强制每次导航到它时都创建组件？

【问题讨论】：

不是一个很好的答案，但我不确定您是否正确使用了 ng2。您不应该使用不同的 URL 路由到同一个组件。使用内部状态更改来操作您的组件。如果您只需要更改 URL，请查看此答案：***.com/questions/35618463/…

我必须强调导航代码，因为它现在在旧路由器上工作，现在已被贬低/删除。它在许多版本的 Angular 2 中工作了很长时间，但问题出在新路由器上。我需要它能够使用后退/前进按钮来回导航，并根据 url 参数加载正确的数据。在我的情况下，仅更改 URL 对我来说效果不佳（尤其是当用户单击后退/前进按钮时，需要为组件重新加载数据）。

我现在认为这是 angular 2 路由器的错误。当一条新路由（即使是相同的组件）时，应该再次构造该组件。我通过将其添加到组件的构造函数中得到了一个解决方法： router.events.subscribe((event: Event) => if (event instanceof NavigationEnd) // 根据 ActivatedRoute 中的参数加载数据 );这样就可以在路线变化时进行拾取，并据此加载数据。

@alexsoftware 你有没有找到任何解决方案。

【参考方案1】：

查看 Angular 2 的 Rangle.io guide。

特别是读取路由参数

部分

ActivatedRoute 上的 params 属性是 Observable 的原因是路由器在导航到同一个组件时可能不会重新创建该组件。在这种情况下，参数可能会更改而无需重新创建组件。

因此您的组件不会被重新创建，但您可以订阅您感兴趣的路线部分的更改（params、data、fragment、queryParams）并将这些初始化方法称为你的subscribe() 回调。