Angular routerLink does not trigger ngOnInit

Question

This is the ngOnInit in the componet.ts file

ngOnInit() {
      this.locationService.getLocation().subscribe( locations => {
      this.locations = locations;
    });
  }

<a [routerLink]="['/locations-list']">

when I use a [routerLink] to navigate to the above component it navigates to the component and load the view, but it does not trigger above ngOnInit method. But if I refresh the page it works fine.
Is there any fix for above problem.

Already I used href to navigate to pages and with href above method works fine always but its very slow. That's why I changes href to [routerLink].

This is the component.html that contains the view

                <div class="table-responsive">
                  <table class="table">
                    <thead class=" text-primary">
                      <th>
                        Location Name
                      </th>

                    </thead>
                    <tbody *ngIf="locations?.length > 0">
                      <tr *ngFor="let location of locations">
                        <td *ngIf="location.verified != false">
                          {{location.locationName}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

@LahiruMirihagoda are you staying on the same component that you want to navigate? — Azkar Moulana, Apr 24 '19 at 06:43

score 3 · Answer 1 · answered Apr 24 '19 at 04:49

3

ngOnInit() is only called once after a component is instantiated, but not when the route changes. You can inject the router and subscribe to it's events or params to get notified about route changes.

ngOnInit() {
     this.route.params.subscribe(params: any) => {
       if(params) //your code
    });
}

answered Apr 24 '19 at 04:49

Seba Cherian

1,755
6
18

1

Can you try adding a debugger; as first line inside ngOnInit() ? – Seba Cherian Apr 24 '19 at 05:44

score 1 · Accepted Answer · answered Apr 24 '19 at 04:44

1

when the router param changed, the base route stays the same. So it doesn't trigger the ngOnInit. So subscribe to the route event

ngOnInit() {
     this.route.params.subscribe(
     params => { 
            // your code
     });
  }

answered Apr 24 '19 at 04:44

Sachila Ranawaka

39,756
7
56
80

```ngOnInit() { this.route.params.subscribe( params => { this.locationService.getLocation().subscribe( locations => { this.locations = locations; }); }); } ``` I tried this but it doesn't work. Please tell me above code is correct or wrong. – Lahiru Mirihagoda Apr 24 '19 at 05:27
is there any errors – Sachila Ranawaka Apr 24 '19 at 05:31
no it work same as before – Lahiru Mirihagoda Apr 24 '19 at 06:33

score 1 · Answer 3 · answered Apr 24 '19 at 05:06

1

Try this

// on click call this function
    (click)="HyperLink()"
// on ts file 
    HyperLink(){
       window.open('/locations-list');  
   }

answered Apr 24 '19 at 05:06

Syed Kashif

420
6
13

It works. But like ```href``` it is slower than ```[routerLink]``` – Lahiru Mirihagoda Apr 24 '19 at 06:38
1

This is a workaround of a problem, not a real answer to the problem. You are leaving angular lifecycle. – Daniel Piñeiro Apr 24 '19 at 07:11

Angular routerLink does not trigger ngOnInit

3 Answers3