About Routing in Angular2

Question

Below code describes routes in my angular 2 application

 RouterModule.forRoot( [
              {path:'' , component:HomeComponent},
              {path:'acategories/:id/products/:pid' , component:ProductComponent},                 
              {path:'acategories/:id/products' , component:ProductsComponent},                  
              {path:'acart' , component:CartComponent},
              {path:'about' , component:AboutComponent},
              {path:'aorders' , component:OrderDetailsComponent},
              {path:'asearch' , component: ProductSearchComponent},
              {path:'**',component:PageNotFoundComponent}
          ])

My root component has links to these routes as depicted in below image

User searches for an item by entering text in textbox and clicking search button.Once the user clicks "search" , below method in root component will be executed , which basically navigates to "asearch" route.

onSearch() 
{       

    if(this.formGroup.valid) 
    {
    this.router.navigate(['asearch' , {search:this.formGroup.controls['search'].value}]);
    }
}   

Now the issue I am facing is , when "asearch" route is already active[ ie its the current active route"] and user tries to search for an item , results are not displayed.

Below is the the code in ProductSearchComponent which gets the results from server.

  ngOnInit() {

    console.log('ngOnInit()');

    this.route.params.subscribe( (params) => {
        this.search = params['search'];
    })

    this.service.searchProducts(this.search).subscribe( {
                                                next: (data) => { 
                                                                    this.products = data;
                                                                },
                                                error: (err) => { this.toaster.error(err) }
                                             })

}

Answer 1

When only route params change, the component is reused (instead of destroyed and recreated). You just need to move your code a bit to keep it working

  ngOnInit() {

    console.log('ngOnInit()');

    this.route.params.subscribe( (params) => {
      this.search = params['search'];

      this.service.searchProducts(this.search)
      .subscribe( {
        next: (data) => { 
          this.products = data;
        },
        error: (err) => { this.toaster.error(err) }
      })
    })
  }

Ensure you use pathMatch: 'full' for empty path routes that are not redirects and don't have child routes

{path:'' , component:HomeComponent, pathMatch: 'full'}

See also Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?

Answer 2

You are facing with the problem of subscribe/unsubscribe. You have to do next:

routeSubscriber: any;


ngOnInit() {

    this.routeSubscriber = this.route.params.subscribe( (params) => {
       this.search = params['search'];
    }) 
}


ngOnDestroy() {
    this.routeSubscriber.unsubscribe();
}

The problem is that you are already subscribed, so you need to unsubscribe it before next try from same route.