Was ist das Angular-Äquivalent zu einer AngularJS $ -Uhr?

In AngularJS konnten Sie Beobachter angeben, um Änderungen in Bereichsvariablen mithilfe der $watchFunktion von zu beobachten $scope. Was entspricht der Suche nach Variablenänderungen (z. B. in Komponentenvariablen) in Angular?

In Angular 2 erfolgt die Änderungserkennung automatisch ... $scope.$watch()und $scope.$digest()RIP

Leider ist der Abschnitt "Änderungserkennung" des Entwicklungshandbuchs noch nicht geschrieben (es gibt einen Platzhalter am unteren Rand der Seite " Architekturübersicht " im Abschnitt "Das andere Zeug").

Hier ist mein Verständnis der Funktionsweise der Änderungserkennung:

• Zone.js "Affe patcht die Welt" - fängt alle asynchronen APIs im Browser ab (wenn Angular ausgeführt wird). Dies ist der Grund, warum wir setTimeout()in unseren Komponenten etwas verwenden können, anstatt so etwas wie $timeout... weil setTimeout()Affen gepatcht sind.
• Angular erstellt und verwaltet einen Baum von "Änderungsdetektoren". Pro Komponente / Direktive gibt es einen solchen Änderungsdetektor (Klasse). (Sie können durch Injizieren auf dieses Objekt zugreifen ChangeDetectorRef.) Diese Änderungsdetektoren werden erstellt, wenn Angular Komponenten erstellt. Sie verfolgen den Status aller Ihrer Bindungen, um sie schmutzig zu überprüfen. Diese ähneln in gewissem Sinne der Automatik $watches(), die Angular 1 für {{}}Vorlagenbindungen einrichten würde .
  Im Gegensatz zu Angular 1 ist das Änderungserkennungsdiagramm ein gerichteter Baum und kann keine Zyklen aufweisen (dies macht Angular 2 viel leistungsfähiger, wie wir weiter unten sehen werden).
• Wenn ein Ereignis ausgelöst wird (innerhalb der Winkelzone), wird der von uns geschriebene Code (der Rückruf des Ereignishandlers) ausgeführt. Es kann alle gewünschten Daten aktualisieren - das Modell / den Status der gemeinsam genutzten Anwendung und / oder den Ansichtsstatus der Komponente.
• Danach wird aufgrund der hinzugefügten Hooks Zone.js der Änderungserkennungsalgorithmus von Angular ausgeführt. Standardmäßig (dh wenn Sie die onPushÄnderungserkennungsstrategie für keine Ihrer Komponenten verwenden) wird jede Komponente im Baum einmal (TTL = 1) ... von oben in der Reihenfolge der Tiefe zuerst untersucht. (Wenn Sie sich im Entwicklungsmodus befinden, wird die Änderungserkennung zweimal ausgeführt (TTL = 2). Weitere Informationen hierzu finden Sie in ApplicationRef.tick () .) Mit diesen Änderungsdetektorobjekten werden alle Bindungen schmutzig überprüft.
  • Lifecycle-Hooks werden als Teil der Änderungserkennung aufgerufen.
    Wenn die zu überwachenden Komponentendaten eine primitive Eingabeeigenschaft (String, Boolean, Number) sind, können Sie implementieren ngOnChanges(), um über Änderungen benachrichtigt zu werden.
    Wenn die Eingangs Eigenschaft ein Referenztyp (Objekt, ein Array, etc.), aber die Referenz hat sich nicht verändert (zB hinzugefügt Sie ein Element auf ein bestehendes Array), müssen Sie implementieren ngDoCheck()(siehe diese SO Antwort für mehr dazu).
    Sie sollten nur die Eigenschaften der Komponente und / oder Eigenschaften von untergeordneten Komponenten ändern (aufgrund der Implementierung eines einzelnen Tree Walks - dh des unidirektionalen Datenflusses). Hier ist ein Plunker , der das verletzt. Stateful Pipes können Sie auch hierher stolpern .
• Für alle verbindlichen Änderungen, die gefunden werden, werden die Komponenten aktualisiert und anschließend das DOM aktualisiert. Die Änderungserkennung ist jetzt abgeschlossen.
• Der Browser bemerkt die DOM-Änderungen und aktualisiert den Bildschirm.

Weitere Referenzen, um mehr zu erfahren:

• Angulars $ Digest wird in der neueren Version von Angular wiedergeboren - erklärt, wie die Ideen von AngularJS Angular zugeordnet werden
• Alles, was Sie über die Änderungserkennung in Angular wissen müssen - erklärt ausführlich, wie die Änderungserkennung unter der Haube funktioniert
• Änderungserkennung erklärt - Thoughtram-Blog 22. Februar 2016 - wahrscheinlich die beste Referenz da draußen
• Savkins Änderungserkennung neu erfunden Video - sehen Sie sich dieses Video auf jeden Fall an
• Wie funktioniert Angular 2 Change Detection wirklich?- Jhades Blog 24. Februar 2016
• Brians Video und Miškos Video über Zone.js. Bei Brian geht es um Zone.js. In Miško geht es darum, wie Angular 2 Zone.js verwendet, um die Änderungserkennung zu implementieren. Er spricht auch über die Erkennung von Änderungen im Allgemeinen und ein wenig darüberonPush .
• Victor Savkins Blog-Beiträge: Änderungserkennung in Angular 2 , Zwei Phasen von Angular 2-Anwendungen , Angular, Unveränderlichkeit und Kapselung . Er legt schnell viel Boden ab, aber manchmal kann er knapp sein, und Sie kratzen sich am Kopf und wundern sich über die fehlenden Teile.
• Ultraschnelle Änderungserkennung (Google Doc) - sehr technisch, sehr knapp, beschreibt / skizziert jedoch die ChangeDetection-Klassen, die als Teil des Baums erstellt werden

Dieses Verhalten ist jetzt Teil des Komponentenlebenszyklus.

Eine Komponente kann die ngOnChanges-Methode in der OnChanges- Schnittstelle implementieren, um Zugriff auf Eingabeänderungen zu erhalten.

Beispiel:

import {Component, Input, OnChanges} from 'angular2/core';


@Component({
  selector: 'hero-comp',
  templateUrl: 'app/components/hero-comp/hero-comp.html',
  styleUrls: ['app/components/hero-comp/hero-comp.css'],
  providers: [],
  directives: [],

  pipes: [],
  inputs:['hero', 'real']
})
export class HeroComp implements OnChanges{
  @Input() hero:Hero;
  @Input() real:string;
  constructor() {
  }
  ngOnChanges(changes) {
      console.log(changes);
  }
}

Wenn Sie zusätzlich zur automatischen bidirektionalen Bindung eine Funktion aufrufen möchten, wenn sich ein Wert ändert, können Sie die Syntax der bidirektionalen Bindungsverknüpfung auf die ausführlichere Version umstellen.

<input [(ngModel)]="yourVar"></input>

ist eine Abkürzung für

<input [ngModel]="yourVar" (ngModelChange)="yourVar=$event"></input>

(Siehe z. B. http://victorsavkin.com/post/119943127151/angular-2-template-syntax )

Sie könnten so etwas tun:

<input [(ngModel)]="yourVar" (ngModelChange)="changedExtraHandler($event)"></input>

Sie können getter functionoder get accessorals Uhr auf Winkel 2 verwenden.

Siehe Demo hier .

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  template: `
  <button (click)="OnPushArray1()">Push 1</button>
  <div>
    I'm array 1 {{ array1 | json }}
  </div>
  <button (click)="OnPushArray2()">Push 2</button>
  <div>
    I'm array 2 {{ array2 | json }}
  </div>
  I'm concatenated {{ concatenatedArray | json }}
  <div>
    I'm length of two arrays {{ arrayLength | json }}
  </div>`
})
export class HelloWorld {
    array1: any[] = [];
    array2: any[] = [];

    get concatenatedArray(): any[] {
      return this.array1.concat(this.array2);
    }

    get arrayLength(): number {
      return this.concatenatedArray.length;
    }

    OnPushArray1() {
        this.array1.push(this.array1.length);
    }

    OnPushArray2() {
        this.array2.push(this.array2.length);
    }
}

Hier ist ein anderer Ansatz, bei dem Getter- und Setter-Funktionen für das Modell verwendet werden.

@Component({
  selector: 'input-language',
  template: `
  …
  <input 
    type="text" 
    placeholder="Language" 
    [(ngModel)]="query" 
  />
  `,
})
export class InputLanguageComponent {

  set query(value) {
    this._query = value;
    console.log('query set to :', value)
  }

  get query() {
    return this._query;
  }
}

Wenn Sie es in [(yourVar)]beide Richtungen binden möchten, können Sie es verwenden , müssen es jedoch implementierenyourVarChange es in beide Ereignis und es jedes Mal aufrufen, wenn sich Ihre Variable ändert.

So etwas, um den Heldenwechsel zu verfolgen

@Output() heroChange = new EventEmitter();

und wenn sich dein Held umzieht, ruf an this.heroChange.emit(this.hero);

Die [(hero)]Bindung erledigt den Rest für Sie

siehe Beispiel hier:

http://plnkr.co/edit/efOGIJ0POh1XQeRZctSx?p=preview

Versuchen Sie dies, wenn Ihre Anwendung weiterhin Anforderungen $parsestellt $eval, z. $watchB. das Verhalten in Angular

https://github.com/vinayk406/angular-expression-parser

Dies beantwortet die Frage nicht direkt, aber ich bin bei verschiedenen Gelegenheiten auf diese Stapelüberlauffrage gestoßen, um etwas zu lösen, für das ich $ watch in angleJs verwenden würde. Am Ende habe ich einen anderen Ansatz als in den aktuellen Antworten beschrieben gewählt und möchte ihn teilen, falls jemand ihn nützlich findet.

Die Technik, mit der ich etwas Ähnliches erreiche, $watchbesteht darin, ein BehaviorSubject( mehr zum Thema hier ) in einem Angular-Dienst zu verwenden und meine Komponenten es abonnieren zu lassen, um die Änderungen zu erhalten (zu beobachten). Dies ähnelt a $watchin angleJs, erfordert jedoch etwas mehr Einrichtung und Verständnis.

In meiner Komponente:

export class HelloComponent {
  name: string;
  // inject our service, which holds the object we want to watch.
  constructor(private helloService: HelloService){
    // Here I am "watching" for changes by subscribing
    this.helloService.getGreeting().subscribe( greeting => {
      this.name = greeting.value;
    });
  }
}

In meinem Dienst

export class HelloService {
  private helloSubject = new BehaviorSubject<{value: string}>({value: 'hello'});
  constructor(){}
  // similar to using $watch, in order to get updates of our object 
  getGreeting(): Observable<{value:string}> {
    return this.helloSubject;
  }
  // Each time this method is called, each subscriber will receive the updated greeting.
  setGreeting(greeting: string) {
    this.helloSubject.next({value: greeting});
  }
}

Hier ist eine Demo zu Stackblitz