Question

我正在使用angular2 rc.6。我正在开发一个类似亚马逊搜索的搜索应用程序，它显示产品。我的问题是，当我使用不同的参数路由到相同的URL时，我的组件没有得到更新。但当我点击页面中的任何位置或按任意键我得到更新的数据

我的依赖关系是： -

  "dependencies": {
"@angular/common":  "2.0.0-rc.6",
"@angular/compiler":  "2.0.0-rc.6",
"@angular/core":  "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http":  "2.0.0-rc.6",
"@angular/platform-browser":  "2.0.0-rc.6",
"@angular/platform-browser-dynamic":  "2.0.0-rc.6",
"@angular/router":  "3.0.0-rc.2",
"@angular/upgrade":  "2.0.0-rc.6",
"systemjs": "0.19.27",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.11",
"zone.js": "^0.6.17",
"angular2-in-memory-web-api": "0.0.18",
"bootstrap": "^3.3.6"

}，

我的路线配置是： -

      const searchRoutes: Routes = [{ path: 'home',component: Dashboard,}, 
{ path: 'titleList/:titleName',component: TitlesListDetails},]
    export const searchRouting = RouterModule.forRoot(searchRoutes);

路线时使用以下组件

 navigateData(){   
    let link = ['/titleList/'+this.searchTerm];
    this.router.navigate(link);
 }

最后是TitlesListDetails组件： -

    constructor(private searchService : SearchService,
                private route: ActivatedRoute,
                private router: Router){  
  this.route.params.subscribe(params => {  this.searchService.fetchAllSearchData(params['titleName'],localStorage.getItem("sortTerm")).subscribe(searchResult => {
              this.searchResult = searchResult;   
              this.products=searchResult.products;            
          },error => console.log("Error while fetching Products Details")
          );          
      });
  }

我在构造函数中订阅了路由参数。任何机构都可以建议如何更新TitlesListDetails中的组件

Answer 1

正如您所做的那样，在组件中重新加载params的最佳方法是使用以下内容：

this.route.params.subscribe(...)

这里有一个解决此选择的问题：https://github.com/angular/angular/issues/9811

Angular 2.2.4和Router 3.2.4对我有用，也许你需要更新？

我的package.json文件的摘录：

"dependencies": {
  "@angular/common": "2.2.4",
  "@angular/compiler": "2.2.4",
  "@angular/core": "2.2.4",
  "@angular/forms": "2.2.4",
  "@angular/http": "2.2.4",
  "@angular/platform-browser": "2.2.4",
  "@angular/platform-browser-dynamic": "2.2.4",
  "@angular/router": "3.2.4",
  "bootstrap": "3.3.6",
  "rxjs": "5.0.0-rc.4",
  "ts-helpers": "^1.1.1",
  "zone.js": "0.7.1"
},

Angular 2 rc.6导航到不刷新组件的相同路径

1 个答案: