导航到同一条路线不刷新组件？

Question

我已经升级为使用路由器已弃用的新 Angular 2 路由器，并且一些行为发生了变化。

我遇到问题的页面是搜索页面。我们选择使用HashLocationStrategy 将所有搜索词放在URL 中。路线如下所示：

const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort/:size/:more', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort/:size', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort', component: HomeComponent },
  { path: 'search/:term/:cat/:page', component: HomeComponent },
  { path: 'search/:term/:cat', component: HomeComponent },
  { path: 'search/:term', component: HomeComponent },
  { path: 'details/:accountNumber', component: DetailsComponent }
];

我知道查询字符串方法可能更适合所有这些选项，但项目要求由其他人决定...

无论如何，如果我使用this.router.navigate(['/search/Hello']); 导航到localhost/#/search/Hello，那么路由器工作正常，一切都很好。在该页面上，如果我尝试this.router.navigate(['/search/World']);，则浏览器地址栏中的 URL 将相应更新，但组件根本不会更改。

以前我可以使用routerCanReuse 表示我确实想重用搜索组件，并且routerOnReuse 会在导航发生时重新运行搜索。我在@angular/router 中看不到与这些相同的内容。如何使用新的 URL 参数重新加载当前路由？

我正在运行 Angular 2 的 2.0.0-rc.3 版本和 @angular/router 的 3.0.0-alpha.8。

Answer 1

我遇到了同样的问题，并通过让路由器不重用路由来解决这个问题。 这可以通过在构造函数中编写以下代码来完成：

constructor(
    private router: Router,
) { 
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
    };
}

Answer 2

您可能根本不需要运行ngOnInit。这是角度路由器的优势。上一个答案中提到了您可以做的-订阅params或paramsMap（route.paramsMap: Observable<ParamMap>带有Map接口）。

还有另一种选择 - 您可以将您的数据检索以保护并重新运行解析器和保护参数更改。将runGuardsAndResolvers: 'paramsOrQueryParamsChange' 放入路由配置中。现在是：

const routes: RouterConfig = [
{ 
     path: "search/:term/:cat/:page/:sort/:size/:more", 
     component: HomeComponent, 
     runGuardsAndResolvers: 'paramsOrQueryParamsChange' 
}, 
...];

Here你可以找到如何从解析器中的api请求数据。

Answer 3

如果只有参数有变化，组件本身将不会再次初始化。但是您可以订阅您发送的参数的更改。

例如，在 ngOnInit 方法上，您可以执行以下操作：

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       const term = params['term'];
       this.service.get(term).then(result => { console.log(result); });
     });
  }