Angular 2 - Ganchos de ciclo de vida

O aplicativo Angular 2 passa por um conjunto completo de processos ou tem um ciclo de vida desde o início até o final do aplicativo.

O diagrama a seguir mostra todos os processos do ciclo de vida do aplicativo Angular 2.

A seguir está uma descrição de cada gancho de ciclo de vida.

  • ngOnChanges - Quando o valor de uma propriedade associada a dados muda, esse método é chamado.

  • ngOnInit - É chamado sempre que ocorre a inicialização da diretiva / componente após o Angular exibir pela primeira vez as propriedades vinculadas aos dados.

  • ngDoCheck - Isso serve para detectar e agir em mudanças que o Angular não consegue ou não detecta sozinho.

  • ngAfterContentInit - Isso é chamado em resposta após o Angular projetar conteúdo externo na visualização do componente.

  • ngAfterContentChecked - Isso é chamado em resposta após o Angular verificar o conteúdo projetado no componente.

  • ngAfterViewInit - Isso é chamado em resposta após o Angular inicializar as visualizações do componente e as visualizações secundárias.

  • ngAfterViewChecked - Isso é chamado em resposta após o Angular verificar as visualizações do componente e as visualizações secundárias.

  • ngOnDestroy - Esta é a fase de limpeza antes de o Angular destruir a diretiva / componente.

A seguir está um exemplo de implementação de um gancho de ciclo de vida. Noapp.component.ts arquivo, coloque o seguinte código.

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

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

No programa acima, estamos chamando o ngOnInit gancho do ciclo de vida para mencionar especificamente que o valor do this.values parâmetro deve ser definido como “Hello”.

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.