Acionando a detecção de alterações manualmente no Angular

Estou escrevendo um componente Angular que tem uma propriedade Mode(): string.

Eu gostaria de poder definir esta propriedade programaticamente, não em resposta a nenhum evento.

O problema é que, na ausência de um evento do navegador, uma ligação de modelo {{Mode}}não é atualizada.

Existe uma maneira de acionar essa detecção de alteração manualmente?

Experimente um destes:

• ApplicationRef.tick()- semelhante ao AngularJS $rootScope.$digest()- ou seja, verifique a árvore de componentes completa
• NgZone.run(callback)- semelhante a $rootScope.$apply(callback)- ou seja, avalie a função de retorno de chamada dentro da zona Angular. Eu acho, mas não tenho certeza, que isso acaba verificando a árvore de componentes completa após a execução da função de retorno de chamada.
• ChangeDetectorRef.detectChanges()- semelhante a $scope.$digest()- ou seja, verifique apenas este componente e seus filhos

Você pode injetar ApplicationRef, NgZoneou ChangeDetectorRefno seu componente.

Usei a referência de resposta aceita e gostaria de dar um exemplo, como a documentação do Angular 2 é muito difícil de ler, espero que seja mais fácil:

1. Importar NgZone:

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

2. Adicione-o ao seu construtor de classes

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

3. Execute o código com zone.run:

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

Consegui atualizá-lo com markForCheck ()

Importar ChangeDetectorRef

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

Injete e instancie

constructor(private ref: ChangeDetectorRef) { 
}

Por fim, marque a detecção de alterações a ser realizada

this.ref.markForCheck();

Aqui está um exemplo em que markForCheck () funciona e detectChanges () não.

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

EDIT: Este exemplo não mostra mais o problema :( Acredito que possa estar executando uma versão Angular mais recente, onde foi corrigida.

(Pressione STOP / RUN para executá-lo novamente)

No Angular 2+, tente o decorador @Input

Ele permite alguma ligação de propriedade interessante entre os componentes pai e filho.

Primeiro, crie uma variável global no pai para armazenar o objeto / propriedade que será passado ao filho.

Em seguida, crie uma variável global no filho para manter o objeto / propriedade transmitida do pai.

Em seguida, no html pai, onde o modelo filho é usado, adicione a notação de colchetes com o nome da variável filho e defina-o igual ao nome da variável pai. Exemplo:

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

Por fim, onde a propriedade filho é definida no componente filho, adicione o decorador de Entrada:

@Input()
public childVariable: any

Quando sua variável pai é atualizada, ela deve passar as atualizações para o componente filho, que atualizará seu html.

Além disso, para acionar uma função no componente filho, dê uma olhada em ngOnChanges.

ChangeDetectorRef.detectChanges () - semelhante ao $ scope. $ Digest () - ou seja, verifique apenas este componente e seus filhos