The ngOnInit lifecycle hook is not triggered by the Angular routerLink

Question

The ngOnInit lifecycle hook is not triggered by the Angular routerLink

In the component.ts file, you will find the ngOnInit function as shown below:

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

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

While using a [routerLink] to navigate to the above component, it loads the view but does not trigger the ngOnInit method. However, refreshing the page resolves the issue. Is there a solution for this problem?

I have previously used href for navigation which always worked fine with the above method, but it was slow. This led me to switch from href to [routerLink].

The following is the content of the component.html file including 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>

angular typescript angular-routerlink

Answer 1

Answer №1

After a component has been instantiated, the ngOnInit() method is called only once and not when the route changes. To be notified about route changes, you have the option to inject the router and subscribe to its events or params.

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

Answer 2

After a component has been instantiated, the ngOnInit() method is called only once and not when the route changes. To be notified about route changes, you have the option to inject the router and subscribe to its events or params.

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

Answer 3

Answer №2

When the parameter of the router is modified, the base route remains constant. As a result, the ngOnInit method is not triggered. To handle this situation, you can subscribe to the route event.

ngOnInit() {
     this.route.params.subscribe(
     params => { 
            // Your custom code here
     });
  }

Answer 4

When the parameter of the router is modified, the base route remains constant. As a result, the ngOnInit method is not triggered. To handle this situation, you can subscribe to the route event.

ngOnInit() {
     this.route.params.subscribe(
     params => { 
            // Your custom code here
     });
  }

Answer 5

Answer №3

Give this a shot

// when clicked, execute the HyperLink function
    (click)="HyperLink()"
// in the Typescript file 
    HyperLink(){
       window.open('/locations-list');  
   }

Answer 6

Give this a shot

// when clicked, execute the HyperLink function
    (click)="HyperLink()"
// in the Typescript file 
    HyperLink(){
       window.open('/locations-list');  
   }

The ngOnInit lifecycle hook is not triggered by the Angular routerLink

Answer №1

Answer №2

Answer №3

Similar questions

Receive notifications from a JSON URL in your area

Using Typescript to incorporate Next.js on Firebase Functions

What is the best way to update the color of a label in a Mantine component?

Solving the issue of loading Ember Initializers during the transition to TypeScript

Access your Angular 2 application on an external device during the development process

What is the best way to activate an input field in react-select?

I am having trouble getting ngFor to properly render my accessible data. Whenever I attempt to use it, it ends up breaking my code. Can someone please

Angular 11 - Binding Data to an Array Element

You may encounter an error stating "Property X does not exist on type 'Vue'" when attempting to access somePropOrMethod on this.$parent or this.$root in your code

"Encountering a 404 Error when attempting to refresh an Angular 13 application hosted on an Apache

MatDialog displaying no content

Localization & Internationalization in Angular 6 CLI for enhancing multi-language functionality

Ways to set a background image for two separate components in Angular

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

Encountering an error when invoking a web API controller from a service in Angular 2

Implementing the react-i18next withNamespaces feature in Ant Design forms

Manipulating strings in Angular using property binding

Angular 2 Twitter integration plugin

The error message states that the property 'registerUser' is not found on the class 'UserController'

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)