Angular5, on routing, url changes but it doesnt load the same page

Question

On click next, URL is getting change but the page, as per url doesn't load. when I click next, url changes and if I refresh the page using same url then it loads the correct page. Below is my ts and html code.

on ts

  ngOnInit() {
    const queryParams = this.route.snapshot.queryParams; // store query param value
    this.index = queryParams.index;
    this.step = queryParams.step;
    this.flowType = queryParams.flowType;
    this.stepper.selectedIndex = Number(this.step);
    console.log(this.index, "this.index", this.step, "this.step",  this.flowType, " this.flowType");
  }

on HTML

<div *ngIf="flowType === 'Prescription Drug Plan'">
  <app-form-navigation   (customHandle)="setApplicationQualification()" isQueryParamPreserve='true'
    nextPath="enrollments/steps/find-a-drug" [queryParams]='{index:2, step:0}' >
  </app-form-navigation>
</div>

Can you create minimal reproducible example on stackblitz?

alt255
– alt255

2019-07-20 18:49:39 +00:00
Commented Jul 20, 2019 at 18:49 — alt255
– alt255, Commented Jul 20, 2019 at 18:49

tano · Accepted Answer · 2019-07-20 19:18:26Z

1

Angular won't reload the same component if you don't navigate away from it. you should use something similar:

constructor(protected route: ActivatedRoute){
}
ngOnInit(){
    this.route.queryParams.subscribe(params => this._init(params));
}
_init(queryParams){
    this.index = queryParams.index;
    this.step = queryParams.step;
    this.flowType = queryParams.flowType;
    this.stepper.selectedIndex = Number(this.step);
    console.log(this.index, "this.index", this.step, "this.step",  this.flowType, " this.flowType");

}

answered Jul 20, 2019 at 19:18

tano

2,8271 gold badge18 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ghais Zaher · Accepted Answer · 2019-07-21 08:00:55Z

0

As stated in other answers and other threads, angular will not reload the same route unless you navigate away then back to it. If you still need to refresh the whole page instead of re-initializing your class variables, check this answer: https://stackoverflow.com/a/49509706/11394663

Inspired by the previous answer, here is my solution to refresh any route (using navigateByUrl to preserve the params):

constructor(
  private router: Router
) {
}

refreshRoute() {
  const url = this.router.url;
  this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigateByUrl(url));
}

answered Jul 21, 2019 at 8:00

Ghais Zaher

2133 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular5, on routing, url changes but it doesnt load the same page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related