CODEWITHSUNDEEP
angularangular5
Krish
Krish

Reputation: 517

angular 5 routing on same component is not working

I am trying to route the same path the second time, but it's not invoking into ngOnInit() to load the new data on the same component.

app.routing.module.ts:

const routes: Routes = [
  {path: '', component: mycomponet}
  {path: 'name', component: nameComponent}
]
@NGModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

app.service.ts: were my routing logic is placed and I am trying to navigate the nameComponent again

let newData = []
nextClick(data) {    
  let condition = true;
  let newData = [];
  if(condition == true) {
    this.router.naviagete(['app-name/name'])
  }
  return this.newData
}

name.component.ts

ngOnInit() {
  console.log(this.appService.nextClick())
}

here my name.component ngOnInit() invoking the first time, but when I try to route the same path again it's not invoking. how to navigate the same path with different data (newData)?

Upvotes: 1

Views: 1804

Answers (4)

CommunismForever
CommunismForever

Reputation: 11

Angular won't re-render the component even with onSameUrlNavigation: 'reload' as per its documentation (https://v17.angular.io/api/router/OnSameUrlNavigation) this is usually used when you want to re-trigger a canMatch guard.

The easiest way is to add a listener to the params subject in Route in your component and wait for changes, then refresh your state.

 
  private async doInit() {
    await this.doMyStuff();
    await this.doAwesomeStuff();
  }

  public async onInit() {
    await this.doInit();
  }

  constructor(
    private readonly route: ActivatedRoute,
  ) {
    this.route.params.subscribe(async (params: Params) => await this.doInit());
  }

Upvotes: 0

3Demon
3Demon

Reputation: 550

From what I understand I think you are trying to do some logic within your app service and return some data after using that logic back to your component. For the same you need to do the following..

Define newData within your name.component.ts and do this:

this.appService.nextClick(oldData).subscribe((data) => {
   this.newData = data;
   console.log(this.newData) //to view it in the console if you are trying to do that
},
(error) => {
     //console.error("Error");
});

And in app.service just do this:

public newData: any[];
nextClick(oldData){ 
    // do something with oldData like oldData = oldData - 1;   
    this.newData = oldData;
    let condition = true;
    if(condition == true){
      return this.newData;
    }
  }

Upvotes: 0

Michael Rychagov
Michael Rychagov

Reputation: 11

If you want just reload your component on the same Url, you should use extra options for your RouterModule and use onSameUrlNavigation: 'reload' https://angular.io/api/router/ExtraOptions#onSameUrlNavigation

Upvotes: 1

Abdu Manas C A
Abdu Manas C A

Reputation: 1139

If you are staying on the same path that you are trying to route to , Angular router won't re-initialize the component. It will understand that the requested path is same as the current path. Hence no routing takes place. You could use an observable in service and pass data to the component if you need to send different data.

Refer this link for examples

Upvotes: 1

Related Questions