Compartir Información Entre Componentes Usando Observables en Angular

Comunicación Entre Componentes en Angular con Observables

Este tutorial enseña cómo implementar la comunicación entre componentes en Angular utilizando observables. Se centrará en un sistema de gestión de perfiles de usuario, donde un componente principal interactúa con otros para ver o actualizar perfiles de usuario.

Pre-requisitos

Antes de empezar, asegúrate de tener lo siguiente instalado:

• Angular CLI
• Node.js
• Un editor de código como Visual Studio Code

Estructura del Proyecto

Vamos a trabajar con tres componentes principales:

1. AdminUsuarioComponent: Administra la interacción general y muestra la lista de usuarios.
2. TablaListUsuarioComponent: Muestra los usuarios en una tabla.
3. PerfilUsuarioComponent: Permite ver y editar el perfil de un usuario.

También utilizaremos un servicio ListenerAdminUsuarioService para facilitar la comunicación entre los componentes.

Paso 1: Crear el Servicio de Comunicación

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Usuario } from '@interfaces/agregar-dependencia-us/agregar-dependencia-us';

@Injectable({
  providedIn: 'root'
})
export class ListenerAdminUsuarioService {
  private usuarioMenuOpcionIdSource = new BehaviorSubject<{usuario: Usuario, menuOpcionId: string}>(null);

  getUsuarioMenuOpcionId() {
    return this.usuarioMenuOpcionIdSource.asObservable();
  }

  setUsuarioMenuOpcionId(data: {usuario: Usuario, menuOpcionId: string}) {
    this.usuarioMenuOpcionIdSource.next(data);
  }
}

Paso 2: Implementar el AdminUsuarioComponent

import { Component, OnInit } from '@angular/core';
import { Usuario } from '@interfaces/agregar-dependencia-us/agregar-dependencia-us';
import { ListenerAdminUsuarioService } from '../listener-admin-usuario/listener-admin-usuario.service';

@Component({
  selector: 'app-admin-usuario',
  templateUrl: './admin-usuario.component.html'
})
export class AdminUsuarioComponent implements OnInit {
  users: Usuario[] = [...]; // Supongamos que aquí están los datos de los usuarios.

  constructor(private listenerAdminUsuarioService: ListenerAdminUsuarioService) {}

  ngOnInit() {
    this.listenerAdminUsuarioService.getUsuarioMenuOpcionId().subscribe(data => {
      if (data) {
        console.log("Acción recibida:", data.menuOpcionId);
        // Realizar acciones basadas en el menú y el usuario seleccionado.
      }
    });
  }
}

Paso 3: Implementar el TablaListUsuarioComponent

import { Component, Input } from '@angular/core';
import { Usuario } from '@interfaces/agregar-dependencia-us/agregar-dependencia-us';
import { ListenerAdminUsuarioService } from '../listener-admin-usuario/listener-admin-usuario.service';

@Component({
  selector: 'app-tabla-list-usuario',
  templateUrl: './tabla-list-usuario.component.html'
})
export class TablaListUsuarioComponent {
  @Input() users: Usuario[];

  constructor(private listenerAdminUsuarioService: ListenerAdminUsuarioService) {}

  selectUser(usuario: Usuario) {
    this.listenerAdminUsuarioService.setUsuarioMenuOpcionId({
      usuario: usuario,
      menuOpcionId: 'opcion-perfil-us'
    });
  }
}

Paso 4: Implementar el PerfilUsuarioComponent

import { Component, OnInit } from '@angular/core';
import { ListenerAdminUsuarioService } from '../listener-admin-usuario/listener-admin-usuario.service';
import { Usuario } from '@interfaces/agregar-dependencia-us/agregar-dependencia-us';

@Component({
  selector: 'app-perfil-usuario',
  templateUrl: './perfil-usuario.component.html'
})
export class PerfilUsuarioComponent implements OnInit {
  usuario: Usuario;

  constructor(private listenerAdminUsuarioService: ListenerAdminUsuarioService) {}

  ngOnInit() {
    this.listenerAdminUsuarioService.getUsuarioMenuOpcionId().subscribe(data => {
      if (data && data.menuOpcionId === 'opcion-perfil-us') {
        this.usuario = data.usuario;
        this.openModal();
      }
    });
  }

  openModal() {
    // Lógica para abrir el modal de perfil
  }

  closeModal() {
    // Lógica para cerrar el modal
  }
}

Puedes guiarte también de este video donde muestra el uso de observables:

https://www.youtube.com/watch?v=96HouMe0o5M

Conclusión

Este tutorial demuestra cómo utilizar observables y servicios para facilitar la comunicación entre componentes en una aplicación Angular, manteniendo el código limpio y modular, perfecto para gestionar perfiles de usuario.