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 mediante programación no en respuesta a ningún evento.

El problema es que, en ausencia de un evento del navegador, {{Mode}}no se actualiza un enlace de plantilla .

¿Hay alguna manera de activar esta detección de cambio manualmente?

Pruebe uno de estos:

• ApplicationRef.tick()- similar a AngularJS $rootScope.$digest()- es decir, verifique el árbol de componentes completo
• NgZone.run(callback)- similar a $rootScope.$apply(callback)- 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 elementos secundarios

Puede inyectar ApplicationRef, NgZoneo ChangeDetectorRefen 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 sea más fácil:

1. Importar NgZone:

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

2. Agréguelo a su constructor de clase

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

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

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

Pude actualizarlo con markForCheck ()

Importar ChangeDetectorRef

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

Inyectar e instanciarlo

constructor(private ref: ChangeDetectorRef) { 
}

Finalmente marque la detección de cambio que tendrá 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 se soluciona.

(Presione STOP / RUN para ejecutarlo nuevamente)

En Angular 2+, prueba el decorador @Input

Permite un buen enlace de propiedad entre los componentes primarios y secundarios.

Primero cree una variable global en el elemento primario para contener el objeto / propiedad que se pasará al elemento secundario.

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

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

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

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

@Input()
public childVariable: any

Cuando se actualiza su variable principal, 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.

ChangeDetectorRef.detectChanges () - similar a $ scope. $ Digest () - es decir, verifique solo este componente y sus elementos secundarios