Una guía para principiantes de servicios en Angular

Una guía para principiantes de servicios en Angular

En este tutorial, aprenderemos cómo crear y usar servicios en una aplicación Angular usando ejemplos.

Índice
  1. ¿Qué es un servicio?
  2. Creación de un servicio
  3. uso del servicio
  4. Problemas
  5. Inyectar servicio a nivel de componente

¿Qué es un servicio?

Un servicio es una clase que nos ayuda a almacenar la lógica de la aplicación en archivos separados, para que podamos reutilizar el mismo servicio con otros componentes.

Por ejemplo, un servicio de contador ayuda a contar el número de clics en los botones.

Creación de un servicio

Abra su terminal y ejecute el siguiente comando para crear un servicio.

ng generate service clickscount

Este comando anterior generará dos nuevos archivos en el directorio de su aplicación clickscount.service.ts Y clickscount.service.spec.ts.

clickscount.service.ts: Este es el archivo que usamos para crear nuestro servicio.

clickscount.service.spec.ts: Se utiliza con fines de prueba.

Abramos nuestro clickscount.service.ts archivar.

clickscount.servicio.ts

import { Injectable } from '@angular/core';
@Injectable({  providedIn: 'root'})export class ClickscountService {

  constructor() { }
}

Este es el código angular generado por defecto. Analicemos el código que vemos arriba.

@Inyectable es un decorador que acepta el objeto como su primer argumento dentro de ese objeto, tenemos un
providedIn propiedad con valor root esto significa que le estamos diciendo a angular que cree una única instancia compartida del ClickscountService y lo inyecta a cualquier clase donde lo solicitemos.

Ahora agregamos lógica a nuestro ClickscountServicepara que podamos usarlo en nuestros componentes para contar los clics de nuestros botones.

Actualiza tu clickscount.service.ts con el código de abajo.

clickscount.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ClickscountService {
  count = 0;
  constructor() { }

  increment() {
    this.count++;
  }

}

uso del servicio

usémoslo ClickcountService dentro de nuestro AppComponent para contar los clics de los botones.

aplicación.componente.ts

import { Component} from '@angular/core';
import { ClickscountService } from './clickscount.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent{

  constructor(private clicksCount: ClickscountService) {  }

  handleClick() {    this.clicksCount.increment();  }}

En el código anterior, primero importamos el ClicksCountService desde ./clickscount.service.ts archivo y agregamos al constructor private clicksCount: ClickscountService le dice a angular que inyecte ClickscountService en este componente.

aplicación.componente.html

<div style="text-align:center">
  <h1>No of clicks {{clicksCount.count}}</h1>  <button (click)="handleClick()">Click me</button>
</div>

Problemas

Actualmente tenemos un problema si intentamos usar nuestro ClicksCountService en otros componentes, la misma instancia se comparte entre todos los componentes, por lo que es posible que obtengamos un recuento de clics incorrecto.

Para resolver este problema, podemos inyectar una instancia de servicio en el nivel de componente en lugar de inyectar en el nivel raíz.

Ahora actualiza tu clickscount.service.ts archivo borrando @Injectable decorador.

clickscount.servicio.ts

export class ClickscountService {
  count = 0;
  constructor() { }

  increment() {
    this.count++;
  }

}

Inyectar servicio a nivel de componente

aplicación.componente.ts

import { Component } from '@angular/core';
import { ClickscountService } from './clickscount.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ClickscountService] })
export class AppComponent {
  constructor(private clicksCount: ClickscountService) {
  }

  handleClick() {
    this.clicksCount.increment();
  }
}

En el código anterior, hemos actualizado nuestro AppComponent agregando un providers matriz con valor ClickscountService para que le diga a angular que inyecte la instancia de Clickscountservice en AppComponent.

Repositorio de código

Si quieres conocer otros artículos parecidos a Una guía para principiantes de servicios en Angular puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas