在 Angular 5 中重新渲染（重新加载）路由器插座答案

【问题标题】：Re-render (reload) router-outlet in Angular 5在 Angular 5 中重新渲染（重新加载）路由器插座
【发布时间】：2018-06-01 15:17:58
【问题描述】：

我有 Angular 5，但在重新渲染（重新加载）路由器插座时遇到问题。我有一个链接http://example.com/:unit/home/somethingElse。在标题中，我有一个切换器来更改unit。当它发生时，我需要从服务器检索新数据并将其放入页眉、主页和页脚（我在这些组件中的 ngOnInit 中有 http 方法）。当我更改 unit (url) 时，数据保持不变。

我尝试使用： this.router.routeReuseStrategy.shouldReuseRoute = () => false; 它有效。但每次我导航到其他页面时，它都会重新呈现我的页眉和页脚。

我知道我可以在this.activatedRoute.params.subsribe() 中使用并把我所有的http 方法放在那里，但是为了实现这个解决方法，我需要重写很多代码。

有没有办法在我需要的时候重新渲染（重新加载）特定的router-outlet？你能帮帮我吗？

【问题讨论】：

当您说the data remains unchanged 时，它暗示了许多可能的原因。可能是解析器，可能是变更检测，也可能是错误。提供理解问题所需的源代码。
我正在检索ngOnInit 中的数据，并且这些组件已经呈现，所以ngOnInit 只运行一次。我知道如果动态 url 发生变化，它应该重新渲染，但如果它发生在同一个模块和路由中。但是我在嵌套模块的第一级和我在第三级检索数据的那些组件中有动态 url。

标签： javascript angular typescript

【解决方案1】：

如果使用shouldReuseRoute = () => false 适合您，那么一般方法是创建自定义RouteReuseStrategy。在shouldReuseRoute 中，您可以检查相同路由组件的路由参数是否不同，如果是则返回 false，即：

if (future.component === curr.component) {
  if (curr.paramMap.keys.length) {
     const diff = curr.paramMap.keys.filter((key) =>
       curr.paramMap.get(key) !== future.paramMap.get(key));
     if (diff.length) { return false; }
  }
}

【讨论】：

不像我预期的那样工作。每次导航到其他页面后，页眉和页脚都会重新呈现。
@MaksymKrugliachenko 这些页面的 URL 是什么样的？不确定您的应用程序中的路由结构。我的意思是，如果您从 :unit/home/somethingElse 转到另一条路线 some/other/route 并且之前已访问过此路线，则应该使用上述自定义策略保留路线状态，但是您使用不同的单位点击同一页面 :unit/home/somethingElse参数比它会重新渲染。我在我的应用中使用了类似的方法。