Attivazione manuale del rilevamento delle modifiche in Angolare

Sto scrivendo un componente angolare che ha una proprietà Mode(): string.

Vorrei poter impostare questa proprietà a livello di codice non in risposta a nessun evento.

Il problema è che in assenza di un evento del browser, l'associazione di un modello {{Mode}}non si aggiorna.

C'è un modo per attivare manualmente questo rilevamento delle modifiche?

Prova uno di questi:

• ApplicationRef.tick()- simile a quello di AngularJS $rootScope.$digest()- ovvero, controlla l'albero dei componenti completo
• NgZone.run(callback)- simile a $rootScope.$apply(callback)- ovvero, valuta la funzione di richiamata all'interno della zona angolare. Penso, ma non sono sicuro, che questo finisca per controllare l'albero dei componenti completo dopo aver eseguito la funzione di callback.
• ChangeDetectorRef.detectChanges()- simile a $scope.$digest()- cioè, controlla solo questo componente e i suoi figli

Puoi iniettare ApplicationRef, NgZoneo ChangeDetectorRefnel tuo componente.

Ho usato il riferimento alla risposta accettata e vorrei fare un esempio, poiché la documentazione di Angular 2 è molto difficile da leggere, spero che sia più semplice:

1. Importazione NgZone:

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

2. Aggiungilo al costruttore della tua classe

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

3. Esegui il codice con zone.run:

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

Sono stato in grado di aggiornarlo con markForCheck ()

Importa ChangeDetectorRef

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

Iniettare e istanziarlo

constructor(private ref: ChangeDetectorRef) { 
}

Infine segna il rilevamento delle modifiche da effettuare

this.ref.markForCheck();

Ecco un esempio in cui markForCheck () funziona e detectChanges () no.

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

EDIT: Questo esempio non descrive più il problema :( credo che potrebbe essere in esecuzione una versione angolare più recente in cui è stato risolto.

(Premere STOP / RUN per eseguirlo di nuovo)

In Angular 2+, prova il decoratore @Input

Permette un bel legame di proprietà tra i componenti padre e figlio.

Innanzitutto creare una variabile globale nel genitore per contenere l'oggetto / proprietà che verrà passata al figlio.

Quindi creare una variabile globale nel figlio per contenere l'oggetto / proprietà passati dal genitore.

Quindi nel codice HTML principale, in cui viene utilizzato il modello figlio, aggiungi la notazione tra parentesi quadre con il nome della variabile figlio, quindi impostala uguale al nome della variabile padre. Esempio:

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

Infine, dove la proprietà figlio è definita nel componente figlio, aggiungi il decoratore di input:

@Input()
public childVariable: any

Quando la variabile principale viene aggiornata, dovrebbe passare gli aggiornamenti al componente figlio, che aggiornerà il suo codice HTML.

Inoltre, per attivare una funzione nel componente figlio, dai un'occhiata a ngOnChanges.

ChangeDetectorRef.detectChanges () - simile a $ scope. $ Digest () - cioè controlla solo questo componente e i suoi figli