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

En AngularJS, podía especificar observadores para observar cambios en las variables de alcance utilizando la $watchfunción de $scope. ¿Cuál es el equivalente de observar cambios de variables (en, por ejemplo, variables de componentes) en Angular?

Jan 03 '16 01:01 Erwin

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 está escrita (hay un marcador de posición cerca de la parte inferior de la página Descripción general de la arquitectura , en la sección "Otras cosas").

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

Zone.js "monkey parchea el mundo": intercepta todas las API asincrónicas en el navegador (cuando se ejecuta Angular). Es por eso que podemos usarlo setTimeout()dentro de nuestros componentes en lugar de algo como $timeout... porque setTimeout()está parcheado.
Angular construye y mantiene un árbol de "detectores de cambios". Hay un detector de cambios (clase) de este tipo por componente/directiva. (Puede obtener acceso a este objeto inyectando ChangeDetectorRef). Estos detectores de cambios se crean cuando Angular crea componentes. Realizan un seguimiento del estado de todas sus fijaciones para realizar comprobaciones sucias. En cierto sentido, son similares a la automática $watches()que Angular 1 configuraría para {{}}los enlaces de plantilla.
A diferencia de Angular 1, el gráfico de detección de cambios es un árbol dirigido y no puede tener ciclos (esto hace que Angular 2 tenga mucho más rendimiento, como veremos a continuación).
Cuando se activa un evento (dentro de la zona Angular), se ejecuta el código que escribimos (la devolución de llamada del controlador de eventos). Puede actualizar cualquier dato que desee: el modelo/estado de la aplicación compartida y/o el estado de vista del componente.
Después de eso, debido a los ganchos que agregó Zone.js, ejecuta el algoritmo de detección de cambios de Angular. De forma predeterminada (es decir, si no está utilizando la onPushestrategia de detección de cambios en ninguno de sus componentes), cada componente en el árbol se examina una vez (TTL=1)... desde arriba, en primer orden en profundidad. (Bueno, si está en modo de desarrollo, la detección de cambios se ejecuta dos veces (TTL=2). Consulte ApplicationRef.tick() para obtener más información sobre esto). Realiza comprobaciones sucias en todos sus enlaces, utilizando esos objetos detectores de cambios.
- Los ganchos del ciclo de vida se llaman como parte de la detección de cambios.
  Si los datos del componente que desea observar son una propiedad de entrada primitiva (cadena, booleano, número), puede implementarla ngOnChanges()para recibir notificaciones de 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á implementarla ngDoCheck()(consulte esta respuesta SO para obtener más información). en este).
  Sólo debe cambiar las propiedades del componente y/o las propiedades de los componentes descendientes (debido a la implementación de recorrido de árbol único, es decir, flujo de datos unidireccional). Aquí hay un plunker que viola eso. Las tuberías con estado también pueden hacerte tropezar aquí.
Para cualquier cambio vinculante que se encuentre, los componentes se actualizan y luego se actualiza el DOM. La detección de cambios ya ha finalizado.
El navegador nota los cambios del DOM y actualiza la pantalla.

Otras referencias para saber más:

$digest de Angular renace en la versión más nueva de Angular : explica cómo se asignan las ideas de AngularJS a 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 internamente.
Explicación de la detección de cambios : blog de Thoughtram, 22 de febrero de 2016: probablemente la mejor referencia que existe
Vídeo sobre la reinvención de la detección de cambios de Savkin : definitivamente mira este
¿Cómo funciona realmente la detección de cambios de Angular 2? - blog de jhade 24 de febrero de 2016
Vídeo de Brian y vídeo de Miško sobre Zone.js. Brian's trata sobre Zone.js. El de Miško 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 las aplicaciones de Angular 2 , Angular, Inmutabilidad y Encapsulación . Cubre mucho terreno rápidamente, pero a veces puede ser conciso y te quedas rascándote la cabeza, preguntándote por las piezas que faltan.
Detección de cambios ultrarrápida (documento de Google): muy técnica, muy concisa, pero describe/esboza las clases de ChangeDetection que se crean como parte del árbol.

Jan 02 '2016 19:01 Mark Rajcok

Este comportamiento ahora forma parte del ciclo de vida del componente.

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

Jan 02 '2016 18:01 toskv