CODEWITHSUNDEEP
angularangular2-routing
Vicky3D
Vicky3D

Reputation: 173

Angular 2 rc.6 Navigating to the same route not refreshing the component

I am using angular2 rc.6. I am developing an search application similar to amazon search where it display products. my issue is that when i am route to same url with different parameter my components are not getting update. but when i click any where in page or press any key i get updated data

My dependencies are :- 

  "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"

},

My route configuration is :-

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

Using below component when is route 

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

and finally TitlesListDetails components :-

    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")
          );          
      });
  }

I have subscribe the route parameters in constructor. can any body suggest how to update components in TitlesListDetails

Upvotes: 1

Views: 1297

Answers (1)

Karbos 538
Karbos 538

Reputation: 3055

As you're doing, the best way to reload params in your component is to use something like :

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

There is an opened issue here explaining this choice: https://github.com/angular/angular/issues/9811

It works for me with Angular 2.2.4 and Router 3.2.4, maybe you have to update ?

An extract of my package.json file : 

"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"
},

Upvotes: 2

Related Questions