parametros - observable angular 4 ejemplo

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

Question

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, no se actualiza un enlace de plantilla {{Mode}} .

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

Answer 1

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

Answer 2

Pruebe uno de estos:

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

Puede inyectar ApplicationRef , NgZone o ChangeDetectorRef en su componente.

Answer 3

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 está solucionado.

(Presione STOP / RUN para ejecutarlo nuevamente)

Answer 4

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)

Answer 5

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úrelo igual al nombre de la variable principal. 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.