-1

I have a component A which is initialized on route 'test/1'. when I again navigate to 'test/2' from component A, ngOnInit is not getting called. Here the parameter is changed so the expected outcome is to reload the component details related to parameter 2. Any gap in my understanding?

jitenderd
  • 181
  • 3
  • 15
  • You need to subscribe to route change events and call service from your component. Cuz you have new route but component is same (it is not rerendered or reinitialized). – Vayrex Apr 03 '18 at 06:48
  • Do you have 'implements OnInit' on both the components? Are both the components in the dom already? Are there even two different components? code? – Carsten Apr 03 '18 at 06:49
  • There are similar questions on stack overflow. Here is one of them https://stackoverflow.com/questions/39752442/different-routes-same-component – Vayrex Apr 03 '18 at 06:49
  • That is correct. Have a look at: https://angular.io/guide/router#reuse – Shadowlauch Apr 03 '18 at 06:50
  • @Vayrex - I am subscribing params in component A which has a child component B. B actually has navigate on click of a button which will route to 'test/2'. I am getting parameters values from A to B using Input and B actually calls an API for data to be updated. I don't have params subscription in B component as I am getting the values from parent. But on parameter change, I want to call the API again inside ngOnInit of B. – jitenderd Apr 03 '18 at 07:01
  • @jitenderd post component A template so we can help you better. – Tomasz Kula Apr 03 '18 at 07:18
  • As route is same you A.onInit is not working so B.onInit is not working second time too. – Vayrex Apr 03 '18 at 07:48

4 Answers4

0

ngOnInit will fire only once for a route when initially load. Subscribe the observable in ngOnInit. And UnSubscribe in ngonDestroy.

Vikas Garg
  • 202
  • 2
  • 8
0

Next code is just to show you logic. It is not working proto, but ts pseudocode.

@Component
class Parent {   

  constructor(private _service: Service, private _router: Router){

  }  

  ngOnInit(){
    //subscribe to route changes
    Router.events.subscribe(() => this.updateOnRouteChange());   
  }

  private updateOnRouteChange(){
    this._service.getSomeData().subscribe((data) => {
      this.someValueWhichIsInputForChild = data;
    });

    //sometimes you need to use Observable.zip or Observable.forkJoin to subscribe for 
    // few service/api calls 
    Observable.zip(this._service.getSomeData(), this._service.getAnotherData()).subscribe(() => {
      //do stuff
    })
  }

  doChildStuffHandler(inputValue:any){
    doApiCall(inputValue);
  }

  ngOnDestroy(){
    //unsubscribe from child events.
    //unsubscribe from route changes
  }
}

class Child{

  @Output
  onSomeAction = new EventEmitter();  

  @Input
  someInputValue:any;

  doStuff(){
    onSomeAction.emit('value from changed input or something else')
  }
}
Vayrex
  • 1,417
  • 1
  • 11
  • 13
-1

Assuming the following route configuration:

{
  path: ':id',
  component: AppComponent,
}

You can subscribe to params changes in your component like this:

constructor(
  private activatedRoute: ActivatedRoute,
) {}

ngOnInit() {
 this.activatedRoute.params.subscribe(({id}) => // do something with id);
}

The important thing to note is that ngOnInit will still only be called once. Only the subscribe block will be invoked every time the params change. So you need to react to the param change inside the subscribe block.

Tomasz Kula
  • 16,199
  • 2
  • 68
  • 79
-1

You can get the data, through observable, using the following snippet: this.route.params.subscribe()

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute){


}

ngOnInit(){
//put the below code in ngOninit

    this.route.params.subscribe(params=>{
        //you get params object with parameter passed
        //ex: let id = params.id or take any action
    });
}
art-fan-vikram
  • 315
  • 2
  • 12