Question

Angular 4.3.1

我的路线看起来像这样：

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

and 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调用构建该数组，我可能会这样做。我想我可以在初始应用程序加载时这样做吗？

有什么更好的建议吗？谢谢你的期待。

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(['/']);
 }

**没有Hack或其他东西，它是加载组件而不刷新的官方解决方案。 **

如何更改为具有相同组件的路由而不重新加载页面

1 个答案: