¿Cuál es el equivalente angular de un reloj AngularJS $?

En AngularJS, usted pudo especificar que los observadores observaran los cambios en las variables de scope usando la función $watch del $scope . ¿Cuál es el equivalente a observar cambios de variables (en, por ejemplo, variables de componentes) en Angular?

En Angular 2, la detección de cambios es automática … $scope.$watch() y $scope.$digest() RIP

Desafortunadamente, la sección Detección de cambios de la guía de desarrollo aún no se ha escrito (hay un marcador de posición cerca de la parte inferior de la página Descripción general de la architecture , en la sección “Otras cosas”).

Aquí está mi entendimiento de cómo funciona la detección de cambios:

  • Zone.js “monkey patches the world”: intercepta todas las API asincrónicas en el navegador (cuando se ejecuta Angular). Esta es la razón por la que podemos usar setTimeout() dentro de nuestros componentes en lugar de algo como $timeout … porque setTimeout() está parcheado.
  • Angular construye y mantiene un árbol de “detectores de cambio”. Existe un detector de cambio (clase) por componente / directiva. (Puede obtener acceso a este objeto inyectando ChangeDetectorRef ). Estos detectores de cambio se crean cuando Angular crea componentes. Mantienen un registro del estado de todas sus fijaciones, para verificaciones sucias. Estos son, en cierto sentido, similares a los $watches() automáticos $watches() que Angular 1 podría configurar para {{}} enlaces de plantilla.
    A diferencia de Angular 1, el gráfico de detección de cambio es un árbol dirigido y no puede tener ciclos (esto hace que Angular 2 sea mucho más eficiente, como veremos más adelante).
  • Cuando se desencadena un evento (dentro de la zona angular), se ejecuta el código que escribimos (la callback del controlador de eventos). Puede actualizar cualquier dato que desee: el estado / modelo de la aplicación compartida y / o el estado de vista del componente.
  • Después de eso, debido a los enganches que Zone.js agregó, luego ejecuta el algoritmo de detección de cambios de Angular. De forma predeterminada (es decir, si no está utilizando la estrategia de detección de cambio onPush en cualquiera de sus componentes), cada componente en el árbol se examina una vez (TTL = 1) … desde la parte superior, en primer orden en profundidad. (Bueno, si está en modo dev, la detección de cambios se ejecuta dos veces (TTL = 2). Consulte ApplicationRef.tick () para obtener más información al respecto). Realiza una comprobación sucia de todos sus enlaces, utilizando esos objetos de cambio de detector.
    • Los ganchos del ciclo de vida se llaman como parte de la detección de cambios.
      Si los datos del componente que desea ver son una propiedad de entrada primitiva (String, boolean, number), puede implementar ngOnChanges() para que se le notifiquen los cambios.
      Si la propiedad de entrada es un tipo de referencia (objeto, matriz, etc.), pero la referencia no cambió (por ejemplo, agregó un elemento a una matriz existente), deberá implementar ngDoCheck() (consulte este SO responde por más sobre esto).
      Solo debe cambiar las propiedades y / o propiedades del componente de los componentes descendientes (debido a la implementación de paseo único en el árbol, es decir, flujo de datos unidireccional). Aquí hay un plunker que viola eso. Las cañerías con buen estado también pueden hacerte tropezar aquí.
  • Para cualquier cambio de enlace que se encuentre, los Componentes se actualizan y luego se actualiza el DOM. La detección de cambios ha finalizado.
  • El navegador nota los cambios DOM y actualiza la pantalla.

Otras referencias para aprender más:

  • El $ digest de Angular renace en la versión más nueva de Angular : explica cómo se mapean las ideas de AngularJS en Angular
  • Todo lo que necesita saber sobre la detección de cambios en Angular : explica con gran detalle cómo funciona la detección de cambios bajo el capó
  • Detección de cambio explicada – Blog de Thoughtram 22 de febrero de 2016 – probablemente la mejor referencia que existe
  • Savkin’s Change Detection Reinventó video – definitivamente mira éste
  • ¿Cómo funciona Angular 2 Change Detection? – Blog de jhade 24 de febrero de 2016
  • El video de Brian y Miško sobre Zone.js. Brian es sobre Zone.js. Miško’s trata sobre cómo Angular 2 usa Zone.js para implementar la detección de cambios. También habla sobre la detección de cambios en general, y un poco sobre onPush .
  • Publicaciones del blog de Victor Savkins: detección de cambios en angular 2 , dos fases de aplicaciones angulares 2 , angular, inmutabilidad y encapsulación . Cubre mucho terreno rápidamente, pero a veces puede ser brusco, y te quedas rascándote la cabeza, preguntándote sobre las piezas que faltan.
  • Ultra Fast Change Detection (Google doc): muy técnico, muy escueto, pero describe / dibuja las clases ChangeDetection que se crean como parte del árbol

Este comportamiento ahora es parte del ciclo de vida de los componentes.

Un componente puede implementar el método ngOnChanges en la interfaz OnChanges para obtener acceso a los cambios de entrada.

Ejemplo:

 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); } } 

Si, además de la vinculación bidireccional automática, desea llamar a una función cuando cambia un valor, puede dividir la syntax de acceso directo de enlace bidireccional en la versión más detallada.

es una abreviatura de

(ver p. ej. http://victorsavkin.com/post/119943127151/angular-2-template-syntax )

Podrías hacer algo como esto:

Puede usar la getter function u get accessor para actuar como reloj en angular 2.

Vea la demostración aquí .

 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: `  
I'm array 1 {{ array1 | json }}
I'm array 2 {{ array2 | json }}
I'm concatenated {{ concatenatedArray | json }}
I'm length of two arrays {{ arrayLength | json }}
` }) 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); } }

Aquí hay otro enfoque que usa las funciones getter y setter para el modelo.

 @Component({ selector: 'input-language', template: ` …  `, }) export class InputLanguageComponent { set query(value) { this._query = value; console.log('query set to :', value) } get query() { return this._query; } } 

Si desea que sea de enlace bidireccional, puede usar [(yourVar)] , pero debe implementar yourVarChange evento yourVarChange y llamarlo cada vez que cambie su variable.

Algo así para rastrear el cambio de héroe

 @Output() heroChange = new EventEmitter(); 

y luego, cuando tu héroe cambie, llama a this.heroChange.emit(this.hero);

el enlace [(hero)] hará el rest por ti

ver ejemplo aquí:

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

Intenta esto cuando tu aplicación aún requiera $parse , $eval , $watch comportamiento similar en Angular

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