导航到同一路径而不刷新组件? [英] Navigating to the same route not refreshing the component?

问题描述

我已升级为使用已弃用路由器的新Angular 2路由器，并且某些行为已更改.

I've upgraded to use the new Angular 2 router from router-deprecated and some behavior has changed.

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

The page I'm having issues with is a search page. We've chosen to put all the search terms in the URL using the HashLocationStrategy. The routes look like this:

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 }
];

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

I know a query string approach might be better fit for all these options but project requirements decided by other people...

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

Anyway if I navigate to localhost/#/search/Hello using this.router.navigate(['/search/Hello']); then the router works fine and everything is great. While on that page if I try to this.router.navigate(['/search/World']); then the URL in the browser's address bar will update accordingly but the component doesn't change at all.

以前，我可以使用routerCanReuse表示我确实想重用搜索组件，并且routerOnReuse会在导航发生时重新运行搜索.我在@angular/router中没有看到与之等效的东西.如何使用新的URL参数重新加载当前路由?

Previously I could use routerCanReuse to indicate that I did want to reuse the search component and routerOnReuse would rerun the search when the navigation happened. I don't see equivalent's to these in @angular/router. How can I reload the current route with new URL parameters?

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

I'm running version 2.0.0-rc.3 for Angular 2 and 3.0.0-alpha.8 of @angular/router.

推荐答案

如果仅params发生了更改，则组件本身将不会再次初始化.但是您可以订阅所发送参数的更改.

If only the params has changes the component itself won't be initialize again. But you can subscribe to changes in the parameters that you send.

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

For example on ngOnInit method you can do something like this:

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

这篇关于导航到同一路径而不刷新组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！