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.