Cuando necesitas compartir la lógica entre componentes, Angular aprovecha el patrón de inyección de dependencias que te permite crear un "servicio", el cual te permite inyectar código en componentes mientras lo manejas desde una única fuente de verdad.
¿Qué son los servicios?
Los servicios son piezas reutilizables de código que pueden ser inyectadas.
Similar a definir un componente, los servicios están compuestos de lo siguiente:
- Un decorador TypeScript que declara la clase como un servicio Angular vía
@Injectabley te permite definir qué parte de la aplicación puede acceder al servicio vía la propiedadprovidedIn(que típicamente es'root') para permitir que un servicio sea accedido en cualquier lugar dentro de la aplicación. - Una clase TypeScript que define el código deseado que será accesible cuando el servicio sea inyectado
Aquí hay un ejemplo de un servicio Calculator.
import {Injectable} from '@angular/core';@Injectable({providedIn: 'root'})export class Calculator { add(x: number, y: number) { return x + y; }}¿Cómo usar un servicio?
Cuando quieres usar un servicio en un componente, necesitas:
- Importar el servicio
- Declarar un campo de clase donde el servicio es inyectado. Asignar el campo de clase al resultado de la llamada de la función integrada
injectque crea el servicio
Aquí está cómo se vería en el componente Receipt:
import { Component, inject } from '@angular/core';import { Calculator } from './calculator';@Component({ selector: 'app-receipt', template: `<h1>El total {{ totalCost }}</h1>`,})export class Receipt { private calculator = inject(Calculator); totalCost = this.calculator.add(50, 25);}En este ejemplo, el Calculator está siendo usado llamando la función Angular inject y pasándole el servicio.