Herança : Transmitindo Conhecimento entre Componentes

Em nossa jornada para explorar os confins da galáxia Angular, a herança surge como uma poderosa ferramenta para construir naves estelares cada vez mais complexas e personalizadas. Imagine cada componente como um módulo da sua nave espacial. Através da herança, podemos criar módulos especializados que herdam as características de módulos básicos, adicionando funcionalidades únicas e adaptando-se a missões específicas.

O que é Herança?

A herança em Angular é como a tradição passada de capitão para capitão na frota estelar. Um componente pode herdar propriedades, métodos e metadados de um componente ou diretiva base, assim como um jovem capitão aprende os segredos e táticas dos comandantes anteriores.

A Base Estelar: Componentes Base

Assim como a estrutura básica de uma nave estelar fornece a base para todos os outros módulos, os componentes base em Angular definem as características essenciais que serão compartilhadas por seus descendentes.

Herança Estelar: A Nave de Comando e o Interceptor Avançado

Em nossa odisseia pelo cosmos Angular, a herança nos permite construir frotas de naves estelares cada vez mais poderosas e especializadas. Imagine a majestosa Nave de Comando, a StarshipBase, que define os sistemas essenciais para a sobrevivência e a comunicação em meio às estrelas. A partir dela, podemos criar o ágil e letal Interceptor Avançado, AdvancedInterceptor, herdando todas as funcionalidades da StarshipBase e adicionando armamentos e sistemas de mira avançados.

A Nave de Comando (StarshipBase): O Coração da Frota

import {Component, ElementRef, Input, OnInit} from '@angular/core';
import {CommunicationService} from "../../services/communication.service";

@Component({
  selector: 'app-starship-base',
  standalone: true,
  imports: [],
  template: `
    <div class="starship-base">
      <p>Nome da Nave: {{ nome }}</p>
      <p>Capacidade de Combate: {{ capacidadeCombate }}</p>
    </div>
  `,
  styles: [`
    .starship-base {
      border: 1px solid #000;
      padding: 10px;
      margin: 10px;
      background-color: #f8f8f8;
    }
    `]
})
export class StarshipBaseComponent implements OnInit {
  @Input() nome: string | undefined;
  @Input() capacidadeCombate: number= 0;
  protected isInitialized = false;

  constructor(protected element: ElementRef, protected communicationService: CommunicationService) {}

  ngOnInit() {
    this.isInitialized = true;
    console.log(`${this.nome} foi inicializada.`);
    this.prepararNave();
  }

  prepararNave() {
    console.log(`A nave ${this.nome} está se preparando.`);
    this.enviarMensagem(`A nave ${this.nome} está pronta.`);
  }

  atacar() {
    console.log(`${this.nome} está atacando com força ${this.capacidadeCombate}`);
    this.communicationService.enviarMensagem('Iniciando ataque!');
  }

  enviarMensagem(mensagem: string) {
    this.communicationService.enviarMensagem(mensagem);
  }

}

O Interceptor Avançado (AdvancedInterceptor): O Guardião da Galáxia

import {Component, ElementRef, Input, OnInit} from '@angular/core';
import {CommunicationService} from "../../services/communication.service";
import {StarshipBaseComponent} from "../starship-base/starship-base.component";

@Component({
  selector: 'advanced-interceptor',
  standalone: true,
  imports: [],
  template: `
    <div class="advanced-interceptor">
      <p>Nome da Nave: {{ nome }}</p>
      <p>Capacidade de Combate: {{ capacidadeCombate }}</p>
      <p>Velocidade: {{ velocidade }} km/s</p>
    </div>
  `,
  styles: [`
    .advanced-interceptor {
      border: 1px solid #000;
      padding: 10px;
      margin: 10px;
      background-color: #e0f7fa;
    }
    `]
})
export class AdvancedInterceptorComponent extends StarshipBaseComponent implements OnInit {
  @Input() velocidade: number= 0;

  constructor(element: ElementRef, communicationService: CommunicationService) {
    super(element, communicationService);
  }

  override ngOnInit() {
    super.ngOnInit();
    console.log(`${this.nome} está pronto para a batalha!`);
  }

  override prepararNave() {
    console.log(`O ${this.nome} está se preparando para uma missão de alta velocidade.`);
    this.enviarMensagem(`O ${this.nome} está pronto para a missão.`);
  }

  atacarComVelocidade() {
    console.log(`${this.nome} está atacando com força ${this.capacidadeCombate} e velocidade ${this.velocidade}`);
    this.communicationService.enviarMensagem('Ataque rápido iniciado!');
  }

}

A Frota em Ação

Agora, podemos usar nossos componentes para construir uma frota estelar poderosa:

 <advanced-interceptor nome="Interceptor 1" [velocidade]="9000"></advanced-interceptor>

Explorando a Herança Estelar:

• Reutilização de Código: A herança nos permite reutilizar a lógica e o template da StarshipBase em outros componentes, como o AdvancedInterceptor.
• Especialização: O AdvancedInterceptor herda as características da StarshipBase e adiciona suas próprias funcionalidades especializadas.
• Organização: A herança ajuda a organizar o código em uma hierarquia lógica, tornando-o mais fácil de entender e manter.

Desafios Interestelares:

• Flexibilidade: É importante projetar seus componentes base de forma que eles possam ser estendidos e personalizados de várias maneiras.
• Acoplamento: Evite criar componentes filhos que dependam muito da implementação interna do componente pai, para facilitar a manutenção e a evolução do código.

Substituindo Métodos do Ciclo de Vida

Você pode sobrescrever métodos do ciclo de vida na classe derivada para adicionar ou modificar o comportamento existente. Pense nisso como ajustar a estratégia de batalha de uma nave para se adequar a novas tecnologias ou táticas.

override ngOnInit() {
    super.ngOnInit();
    console.log(`${this.nome} está pronto para a batalha!`);
  }

Se uma classe base define um método de ciclo de vida, como ngOnInit, uma classe filha que também implementa ngOnInitsubstitui a implementação da classe base. Se você quiser preservar o método de ciclo de vida da classe base, chame explicitamente o método com super.

Encaminhamento de Dependências Injetadas

Quando você estende um componente ou diretiva, pode ser necessário encaminhar dependências injetadas da classe base para a classe derivada. Isso é como garantir que cada nova geração de capitães tenha acesso aos mesmos recursos essenciais que seus predecessores.

constructor(element: ElementRef, communicationService: CommunicationService) {
    super(element, communicationService);
  }

Se uma classe base depende de injeção de dependência, a classe filha deve passar explicitamente essas dependências para super.

Aplicando Herança no Angular com Componentes de Diálogo

Vamos criar componentes de diálogo que herdam de um componente base, mostrando como a herança pode simplificar e organizar nosso código.

1. Componente Base de Diálogo (BaseDialogComponent)

Nosso BaseDialogComponent funciona como a StarshipBase, fornecendo funcionalidades comuns para todos os diálogos, como gerenciamento de título e fechamento do diálogo

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";

@Component({
  selector: 'base-dialog',
  standalone: true,
  imports: [],
  template: ``,
  styles: ``
})
export class BaseDialogComponent<T> {
  title: string;

  constructor(
      public dialogRef: MatDialogRef<T>,
      @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.title = data.title || 'Default Title';
  }

  close(result?: any): void {
    this.dialogRef.close(result);
  }

  executeAction(action: () => void): void {
    action();
  }

}

Utilizando a herança, podemos criar componentes Angular que são modulares, reutilizáveis e fáceis de manter. Assim como na frota estelar, onde cada nave herda as características básicas de um design comum, nossos componentes Angular podem herdar funcionalidades de componentes base, permitindo-nos construir aplicações complexas de forma organizada e eficiente.

Neste artigo, vimos como construir componentes de diálogo que herdam de um componente base, adicionando funcionalidades específicas e mantendo a consistência e a simplicidade do código.
Que sua jornada pelo Angular seja tão bem-sucedida quanto a exploração das estrelas!