Activación de la detección de cambios manualmente en Angular

Estoy escribiendo un componente Angular que tiene una propiedad Mode(): string. Me gustaría poder establecer esta propiedad programáticamente no en respuesta a ningún evento. El problema es que en ausencia de un evento de navegador, un enlace de plantilla {{Mode}} no se actualiza. ¿Hay alguna forma de activar esta detección de cambios manualmente?

Author: Lazar Ljubenović, 2016-01-16
Source

4 answers

Prueba uno de estos:

  • ApplicationRef.tick() - similar a AngularJS $rootScope.$digest() check es decir, comprobar el árbol de componentes completo
  • NgZone.run(callback) - similar a $rootScope.$apply(callback) evaluate es decir, evaluar la función de devolución de llamada dentro de la zona Angular. Creo, pero no estoy seguro, que esto termina comprobando el árbol de componentes completo después de ejecutar la función de devolución de llamada.
  • ChangeDetectorRef.detectChanges() - similar a $scope.$digest()} es decir, marque solo este componente y sus hijos

Puedes inyectar ApplicationRef, NgZone, o ChangeDetectorRef en su componente.

 427
Author: Mark Rajcok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-16 21:34:12

Usé la referencia de respuesta aceptada y me gustaría poner un ejemplo, ya que la documentación de Angular 2 es muy difícil de leer, espero que esto sea más fácil:

  1. Importar NgZone: 

    import { Component, NgZone } from '@angular/core';

  2. Agrégalo a tu constructor de clase

    constructor(public zone: NgZone, ...args){}

  3. Ejecute el código con zone.run: 

    this.zone.run(() => this.donations = donations)
 81
Author: juanpastas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-06 17:04:12

Pude actualizarlo con markForCheck()

Importar ChangeDetectorRef 

import { ChangeDetectorRef } from '@angular/core';

Inyectarlo e instanciarlo

constructor(private ref: ChangeDetectorRef) { 
}

Finalmente marque la detección de cambio para que tenga lugar

this.ref.markForCheck();

Aquí hay un ejemplo donde markForCheck () funciona y DetectChanges () no.

Https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

EDITAR: Este ejemplo ya no retrata el problema: (Creo que podría estar ejecutando un Angular más nuevo versión donde está arreglado.

(Pulse STOP/RUN para ejecutarlo de nuevo)

 45
Author: Nuno Tomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-25 16:33:56

En Angular 2+, pruebe el decorador @Input

Permite un buen enlace de propiedades entre los componentes padre e hijo.

Primero cree una variable global en el padre para contener el objeto / propiedad que se pasará al niño.

A continuación, cree una variable global en el hijo para contener el objeto / propiedad pasada del padre.

Luego, en el html principal, donde se usa la plantilla secundaria, agregue corchetes notación con el nombre del niño variable, luego establézcala igual al nombre de la variable padre. Ejemplo:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

Finalmente, donde la propiedad hija está definida en el componente hijo, agregue Decorador de entrada: 

@Input()
public childVariable: any

Cuando se actualiza la variable padre, debe pasar las actualizaciones al componente hijo, que actualizará su html.

También, para activar una función en el componente hijo, eche un vistazo a ngOnChanges.

 2
Author: Jeremy Swagger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-22 16:18:48