🚀 Capítulo 08: Ciclo de Vida do Componente

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o ciclo de vida de um componente no Angular e saberá como usar os “Hooks” (ganchos) como ngOnInit e ngOnDestroy para executar código no momento exato em que o componente nasce e morre na tela.

---

🏢 O Cenário Prático (Seu Desafio)

Os computadores de uma nave não ficam processando tudo o tempo todo. Eles ligam os sistemas de navegação apenas quando você entra na nave e desligam para economizar energia quando você sai. Seu desafio é usar os ciclos de vida para ligar o radar no momento certo e limpá-lo ao desligar!

---

🧠 Fundamentos: A Teoria Traduzida

Desde o momento em que o Angular cria um componente até o momento em que ele o remove da tela, o componente passa por várias fases. O Angular nos avisa dessas fases através de funções especiais chamadas Lifecycle Hooks.

As duas fases mais importantes para quem está começando são:

1. ngOnInit (O Nascimento)

É executado apenas uma vez, logo após o componente ser criado na tela. É o lugar perfeito para buscar dados de um banco de dados ou inicializar variáveis.

• Analogia: É a rotina de boot do sistema da nave quando você aperta o botão de ligar.

2. ngOnDestroy (A Morte)

É executado logo antes de o componente sumir da tela (por exemplo, se o usuário mudar de página ou um *ngIf esconder o elemento). É usado para limpar a memória e parar processos que estavam rodando.

• Analogia: É a rotina de desligamento seguro da nave para não queimar os circuitos.

---

📖 Exemplo Guiado: Inicializando o Radar

Vamos usar o ngOnInit para carregar a lista de planetas automaticamente.

🛠️ Passo a Passo (TypeScript)

Abra src/app/painel-controle/painel-controle.component.ts.

1. Faça a classe implementar o OnInit:

import { Component, OnInit } from '@angular/core';
 
@Component({ /* ... */ })
export class PainelControleComponent implements OnInit {
  planetas: string[] = [];
 
  // Executa automaticamente quando o componente nasce
  ngOnInit(): void {
    console.log('📡 Radar ligado! Buscando planetas...');
    this.planetas = ['Coruscant', 'Mustafar', 'Kamino'];
  }
}

🕹️ Como Executar e Testar no VS Code

1. Salve o arquivo e abra o navegador.
2. Abra o Console do Desenvolvedor (F12 no teclado e clique na aba Console).
3. Você verá a mensagem ”📡 Radar ligado! Buscando planetas…” impressa lá, provando que o código rodou sozinho ao iniciar!

---

🛠️ Prática Obrigatória 1

No mesmo componente, use o hook ngOnDestroy para exibir no console a mensagem: ”🔴 Sistemas do Painel Desligados!“. (Nota: Para testar, você precisará usar um *ngIf no componente pai para fazer o painel sumir da tela!).

---

🛠️ Prática Obrigatória 2

Mova a inicialização da variável nomePiloto (que fizemos no Capítulo 3) para dentro do ngOnInit. Em vez de definir o valor na criação da variável, crie-a vazia e defina this.nomePiloto = 'Han Solo'; dentro do ngOnInit.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No .ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
 
export class PainelControleComponent implements OnInit, OnDestroy {
  
  ngOnInit(): void {
    // ...
  }
 
  ngOnDestroy(): void {
    console.log('🔴 Sistemas do Painel Desligados!');
  }
}

Prática 2:

No .ts:

export class PainelControleComponent implements OnInit {
  nomePiloto: string = '';
 
  ngOnInit(): void {
    this.nomePiloto = 'Han Solo';
  }
}

---

← Capitulo Anterior | Proximo Capitulo →