Angular2+ : Refreshing of router outlet components data from outside router outlet components

Question

<div><SearchProjects></SearchProjects></div>
<div>
    <router-outlet></router-outlet>
</div>

Whenever I change the search content depending on that I need to refresh data of router-outlet component data.

While first routing I am sharing the data using shared service, but it will not work because on init call only once. For next data for the same routing, it will not work.

I need to share data between constant search component to changing router(router-outlet) component. Some times for the same routing two different data need to be rendered.

Answer 1

Make the shared data in your service a Subject that can be subscribed to like an observable. When you use subject.next(value), all observers will be updated. You would subscribe to the subject in your onInit function in your components that utilize the shared service.

Answer 2

use service provider only at app.modules.ts

Answer 3

   constructor(route:ActivatedRoute){
      route.params.subscribe(val=>{ 
       //    add to do function()
      })
   }

Need to inject "ActivatedRoute" and subscribe the params

Route only destroys and recreates the component when it navigates to a different route. when only route params or query params are updated but the route is the same, the component won't be destroyed and recreated.