Πώς λειτουργεί ο μηχανισμός Ανίχνευσης Αλλαγών στο Angular;

Ο μηχανισμός Change Detection στο Angular είναι υπεύθυνος για την παρακολούθηση των αλλαγών στα δεδομένα και την ενημέρωση του DOM όταν είναι απαραίτητο.

Το Angular χρησιμοποιεί μια ζώνη (NgZone) για να παρεμβαίνει σε ασύγχρονα γεγονότα (π.χ. κλικ, αιτήματα HTTP). Μετά από τέτοια γεγονότα, ξεκινάει ένας κύκλος ανίχνευσης αλλαγών, που ελέγχει τις τιμές των συσχετισμένων ιδιοτήτων των συστατικών.

Το Angular συγκρίνει τις τρέχουσες τιμές με τις προηγούμενες (ανά αναφορά ή τιμή, ανάλογα με τη στρατηγική) και ενημερώνει την προβολή αν ανιχνευθούν αλλαγές.

Υπάρχουν δύο στρατηγικές ανίχνευσης αλλαγών:

• Default: ελέγχει όλα τα συστατικά στο δέντρο
• OnPush: ελέγχει μόνο αν αλλάξουν τα εισερχόμενα δεδομένα ή αν συμβεί ένα γεγονός μέσα στο συστατικό

Αυτό επιτρέπει τη βελτιστοποίηση της απόδοσης, μειώνοντας τον αριθμό των ελέγχων.

Παράδειγμα:

@Component({
  selector: 'app-example',
  template: `{{counter}}`
})
export class ExampleComponent {
  counter = 0;

  increment() {
    this.counter++;
  }
}

Καλέστε το increment(), και το Angular θα ανιχνεύσει την αλλαγή στο counter και θα ενημερώσει την εμφάνιση.