Módulo 7: Ciclo de Vida do Componente

2. Resumo da Aula Anterior

No Módulo 6, aprendemos a usar [ngClass] e [ngStyle] para mudar o visual dos componentes dinamicamente. Agora, vamos descobrir que os componentes têm uma "vida" própria e que podemos intervir em momentos específicos, desde que nascem até que morrem.

3. O Que Vais Aprender Hoje

✅ O que é o LifeCycle de um componente.
✅ ngOnInit: O momento do nascimento e inicialização.
✅ ngOnChanges: Detetar mudanças nas portas de entrada.
✅ ngOnDestroy: A limpeza final antes da despedida.

4. Teoria: A Linha do Tempo

Conceito: Um componente não aparece apenas no ecrã. Ele passa por uma série de etapas: é criado, recebe dados, o seu visual é montado e, finalmente, ele é removido. O Angular permite-nos "pendurar" código (Hooks) nestas etapas.

🎭 Analogia: O Ator de Teatro

Pensa no componente como um ator numa peça:

Constructor: O ator acorda e sabe quem é (Criação da classe).
ngOnInit (Entrada em Cena): O ator entra no palco, vê o cenário e começa a atuar (Ideal para carregar dados de APIs).
ngOnChanges (Mudança de Guião): Alguém grita uma nova instrução do bastidor (Um `@Input` mudou).
ngOnDestroy (Saída de Cena): A peça acaba, o ator tira a maquilhagem e desliga as luzes (Limpeza de memória).

5. Exemplos Práticos

Exemplo 1: ngOnInit (O Mais Comum)

Onde deves colocar a tua lógica inicial.

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

export class MeuComponente implements OnInit {
  listaProdutos: any[] = [];

  ngOnInit() {
    console.log("O componente nasceu!");
    // Aqui chamarias o teu serviço para buscar dados
    this.listaProdutos = ["Teclado", "Rato", "Monitor"];
  }
}

Exemplo 2: ngOnChanges

Reagir a mudanças vindas do Pai.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

export class FilhoComponent implements OnChanges {
  @Input() valor = 0;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['valor']) {
      console.log("O valor mudou de " +
                  changes['valor'].previousValue + " para " +
                  changes['valor'].currentValue);
    }
  }
}

Exemplo 3: ngOnDestroy (Limpeza)

Evitar que processos continuem a correr "fantasma".

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

export class TimerComponent implements OnDestroy {
  intervalo = setInterval(() => console.log("Tic Tac..."), 1000);

  ngOnDestroy() {
    console.log("A destruir... Limpando o timer.");
    clearInterval(this.intervalo);
  }
}

6. Agora é a Tua Vez!

Vamos criar o "Detetive de Componentes":

Cria um novo componente chamado LifeCycleTest.
Implementa as interfaces OnInit e OnDestroy.
Dentro do ngOnInit, faz um alert("Olá, acabei de nascer!").
Dentro do ngOnDestroy, faz um console.log("Adeus, mundo cruel...").
No componente Pai, usa um *ngIf com um botão para mostrar e esconder este componente.
Observa quando é que as mensagens aparecem.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 O Ciclo de Vida são etapas automáticas pelas quais todos os componentes passam.
📌 **ngOnInit**: O melhor lugar para inicializar variáveis e buscar dados externos.
📌 **ngOnChanges**: Só corre se houver propriedades `@Input`.
📌 **ngOnDestroy**: Crucial para parar contadores, áudios ou subscrições e poupar bateria/memória.
📌 Deves sempre declarar `implements NomeDoHook` na tua classe.

9. Desafios Práticos

Desafio 1: OnInit vs Constructor

Porque é que não devemos carregar dados de uma base de dados dentro do constructor da classe?

Desafio 2: O Hook Fantasma

Se um componente for escondido com CSS (display: none), o hook ngOnDestroy é chamado? Porquê?

Desafio 3: Ordem de Chegada

Qual destes hooks corre primeiro: ngOnInit ou ngOnChanges?

Aprende Web: Angular

Módulo 7: Ciclo de Vida (LifeCycle Hooks)