如何在不重新加载页面的情况下更改为具有相同组件的路由答案

【问题标题】：How to change to route with same component without page reload如何在不重新加载页面的情况下更改为具有相同组件的路由
【发布时间】：2018-01-11 19:49:29
【问题描述】：

Angular 4.3.1

我的路线如下所示：

{ path: ':department', loadChildren: 'app/pages/pages.module#PagesModule' }

还有pagesRoutes

{
  path: '',
  component: PagesComponent,
  pathMatch: 'full',
},
{
  path: ':id',
  component: PagesComponent,
}

假设我导航到/department-name。 PagesComponent 已加载，我进行查找以找到部门的默认页面并加载内容。如果我然后导航到/department-name/1，PagesComponent 正在再次初始化并且屏幕重新加载，我想找到一种方法在这两个路线更改之间不重新加载。此时，如果我导航到/department-name/2，内容会发生变化，而不会像我想要的那样重新加载页面。有没有办法可以重新组织事物，以便在/department-name 和/department-name/id 之间导航时不会重新加载组件？

我发现了这个hack，我认为它不能工作，因为:department 是动态生成的路由。除非有办法让我在路由器配置中获取该参数？

还有this SO 使用RouteReuseStrategy 的文章，但它使用了一个可重用的可能路由的静态数组。如果我可以从 HTTP 调用构建该数组，我可能会这样做。我想我可以在初始应用加载时做到这一点？

有更好的建议吗？感谢观看。

【问题讨论】：

看看stackoverflow.com/questions/41393095/…
谢谢，@Tim.Burnell。我认为这个问题是指我遇到的相反问题。我已经订阅了 PageComponent 中的参数并且效果很好。问题是当我将路由从 /department 更改为 /department/1 时，PageComponent 会重新初始化，导致页面重绘并再次调用 ngOnInit。

标签： angular

【解决方案1】：

 // First import in your component:    
import { Router, NavigationEnd } from '@/router';

 // Then in your component class constructor use below code: 

constructor(private router: Router) { 
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
      return false;
    };
    this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
            this.router.navigated = false;
        }
    });
  }

 // Finally in any of your method, where you want to refresh use below code
  for refresh
 any_method_name() {
    this.router.navigate(['/']);
 }

** NO Hack 什么的，它的官方解决方案是加载组件而不刷新。 **

【讨论】：