Activación de detección de cambio manualmente en Angular

Estoy escribiendo un componente angular que tiene una propiedad Mode(): string . Me gustaría poder establecer esta propiedad mediante progtwigción, no como 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 manera de activar esta detección de cambio manualmente?

Pruebe uno de estos:

  • ApplicationRef.tick() : similar a $rootScope.$digest() AngularJS, es decir, comprueba el árbol de componentes completo
  • NgZone.run(callback) : similar a $rootScope.$apply(callback) , es decir, evaluar la función de callback dentro de la zona angular. Creo, pero no estoy seguro, que esto termine revisando el árbol de componentes completo después de ejecutar la función de callback.
  • ChangeDetectorRef.detectChanges() – similar a $scope.$digest() – es decir, verifique solo este componente y sus hijos

Puede inyectar ApplicationRef , NgZone o ChangeDetectorRef en su componente.

Utilicé 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. Ejecutar código con zone.run :

     this.zone.run(() => this.donations = donations) 

Pude actualizarlo con markForCheck ()

Importar CambiarDetectorRef

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

Inyectar e instanciarlo

 constructor(private ref: ChangeDetectorRef) { } 

Por último, marcar la detección de cambios 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 una versión Angular más nueva donde esté arreglado.

(Presione STOP / RUN para volver a ejecutarlo)

En Angular 2+, pruebe el decorador @Input

Permite una buena vinculación de propiedad entre los componentes padre e hijo.

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

A continuación, cree una variable global en el elemento secundario para mantener el objeto / propiedad pasado del elemento principal.

Luego, en el html padre, donde se usa la plantilla secundaria, agregue la notación de corchetes con el nombre de la variable secundaria, luego configúrelo igual al nombre de la variable padre. Ejemplo:

   

Finalmente, donde se define la propiedad del elemento secundario en el componente secundario, agregue el decorador de entrada:

 @Input() public childVariable: any 

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

Además, para activar una función en el componente secundario, eche un vistazo a ngOnChanges.