Το Hook ngOnInit στο Angular

Το hook ngOnInit ενεργοποιείται κατά την προετοιμασία του component. Στη δράση του μοιάζει με τον constructor της κλάσης, αλλά σε αυτό μπορείτε να εκτελέσετε πιο σύνθετες εργασίες, για παράδειγμα, φόρτωση δεδομένων από τον server.

Ας δούμε πώς να χρησιμοποιήσετε αυτό το hook. Πρώτα πρέπει να εισαγάγετε τη διεπαφή του:

app/user/user.component.tsimport { OnInit } from '@angular/core';

Στη συνέχεια, πρέπει να συμπεριλάβετε τη διεπαφή στην κλάση του component:

app/user/user.component.tsexport class UserComponent implements OnInit {

}

Μετά από αυτό, θα μπορούμε να γράψουμε στην κλάση του component τη μέθοδο ngOnInit και αυτή η μέθοδος θα εκτελεστεί αυτόματα κατά την προετοιμασία της κλάσης. Ας ελέγξουμε τη λειτουργία της:

app/user/user.component.tsexport class UserComponent implements OnInit {
  constructor() {
    console.log('constructor is started');
  }
  ngOnInit() {
    console.log('onInit is applied');
  }
}