3

I have the following code in my application. The navigation works when clicked on the anchor element the first time. It loads the corresponding target component and everything is good. However, when I click on the anchor element again, the url in the address bar changes but the corresponding target component does not fire. Why is this happening?

<div class="nav-features-content">
    <div>
        <div class="sideNav-header">WALLS</div>
        <ul>
            <li *ngFor="let wall of walls">
                <a [routerLink]="['/wall', wall.ViewItem_Id]"> {{wall.Title}}</a>
            </li>
        </ul>
    </div>
</div>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Shilpa Nagavara
  • 1,055
  • 2
  • 16
  • 31
  • 1
    Please give a [mcve], HTML on its own doesn't give much information. – jonrsharpe Nov 14 '16 at 11:31
  • Are the prms and Link diffrenciated when you click second Time.. It generally happen when the URL Prms doesnt change the router doesnt perform any action – mayur Nov 14 '16 at 11:36
  • mayur, yes the url changes from http://localhost:48512/wall/2 to --> http://localhost:48512/wall/46. The page is not getting refreshed. – Shilpa Nagavara Nov 14 '16 at 11:38
  • 42 is getting to 46 correct.. For testing try with wall 1 and wall 2 example or add some like this s42 and s46 – mayur Nov 14 '16 at 11:40
  • when i was going through same issue i had done var d = new Date(); var n = d.getTime(); and added time in the url which could eaisly change url navigation – mayur Nov 14 '16 at 11:46
  • tried adding date to the url. it is not helping. I don't think the issue is to do with caching of data. the page is simply not loading. the ngOnInit and constructor are not firing. – Shilpa Nagavara Nov 14 '16 at 12:48
  • I have the same problem. Trying to link from "/company/1" to "/company/2" and only the URL changes and the component does not reload. This was not a problem in the betas, is there a way to force the router to reload? – somecallmemike Dec 07 '16 at 20:21

1 Answers1

1

Turns out, we need to subscribe to the params in the target component, like so

private sub: any;

ngOnInit(): void {
  this.sub = this._route.params.subscribe(params => { 
  console.log(this._route.params.value.id);
  });
}

ngOnDestroy() {
        this.sub.unsubscribe();
    }
Shilpa Nagavara
  • 1,055
  • 2
  • 16
  • 31