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

Question

Angular 4.3.1

我的路线如下所示:

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

和页面路由

{
  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 调用构建该数组，我就可以做到这一点。我想我可以在初始应用程序加载时做到这一点？

还有更好的建议吗？感谢您的浏览。

Answer 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 之类的，其官方解决方案无需刷新即可加载组件。 **