Herramientas de usuario

Herramientas del sitio


ada:howto:sicoferp:factory:new-migracion-sicoferp:front:base-component

¡Esta es una revisión vieja del documento!


BaseComponent<T>

Clase abstracta reutilizable en Angular para facilitar la creación de componentes que usen formularios, tablas, modales y alertas. Provee métodos y propiedades comunes que se pueden extender y personalizar según las necesidades del componente específico.

Objetivo

Esta clase permite centralizar funciones comunes como:

  • Inicialización de formularios.
  • Configuración y carga de datos en tablas.
  • Manejo de paginación.
  • Registro de acciones en tablas.
  • Control de selección de filas.
  • Navegación entre rutas.
  • Configuración de modales y alertas visuales.

Inyecciones de Dependencias

  • Router (`@angular/router`): permite navegar programáticamente entre rutas.
  • FormBuilder (`@angular/forms`): crea formularios reactivos fácilmente.
  • BreadcrumbService: establece el breadcrumb de navegación (migas de pan).

Estas dependencias se inyectan usando la función `inject()`.

Propiedades

  • title / subTitle: Títulos que pueden usarse para encabezados del componente.
  • form: Instancia del formulario reactivo principal del componente.
  • tableConfig: Configuración de comportamiento y estilo de la tabla.
  • columns: Lista de columnas visibles de la tabla.
  • paginationConfig: Configuración específica para la paginación.
  • dataSource: Arreglo de datos que alimenta la tabla.
  • page / size: Controlan la página actual y el tamaño de la paginación.
  • selectedItems: Elementos seleccionados en la tabla.
  • showMessage: Bandera que controla si se muestra o no un mensaje.
  • alertOptions: Configuración para mostrar un mensaje con SweetAlert.
  • modalConfig: Configuración de un modal genérico.
  • actionHandlers: Mapa que asocia nombres de acciones con funciones que las manejan.

Métodos Públicos y Protegidos

initForm()

Inicializa el formulario base con un campo `filter`.

this.form = this._fb.group({
  filter: ['']
});

Es útil para componentes que tengan filtros simples.

setBreadcrumb(items: BreadcrumbItem[])

Configura el breadcrumb que se mostrará en la parte superior del componente, útil para indicar la ruta actual.

this._breadcrumbService.setItems(items);

initTable()

Inicializa la tabla cargando columnas, configuración y datos. Solo funciona si los métodos getTableColumns(), getTableConfig() y loadDataTable() están implementados en la subclase.

ada/howto/sicoferp/factory/new-migracion-sicoferp/front/base-component.1750877722.txt.gz · Última modificación: 2025/06/25 18:55 por 192.168.175.164