Saltar al contenido

Introducción a Servicios de AngularJun, 26thIn este tutorial, vamos a aprender acerca de cómo crear y utilizar los servicios …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear y utilizar esos servicios en angular con la ayuda de ejemplos.

Qué es un servicio?

Un servicio es una clase que contiene los datos o funciones que nuestras necesidades de aplicación, lo que nos ayuda a almacenar nuestra lógica de la aplicación en un archivo separado para que podamos volver a utilizar el Servicio con diferentes componentes.

Creación de un servicio de

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

ng generate service clickscount
#clickscount is our service name

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

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

clickscount.service.spec.ts: Se utiliza para propósitos de prueba.

vamos a abrir nuestro archivo clickscount.service.ts.

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

constructor() { }
}

Este es el código genera angular predeterminada Vamos a discutir el código vemos arriba.

@Injectable es un decorador que acepta el objeto como primer argumento dentro de ese objeto que tenemos propiedad aprovidedIn con raíz de valor que significa que estamos contando angular para crear una sola instancia compartida de los ClickscountService y lo inyecta a cualquier clase nos preguntamos para ello.

Ahora vamos a añadir un poco de lógica para nuestra ClickscountService para que podamos usarlo en nuestros componentes para contar nuestras pulsaciones de botón.

Actualizar sus clickscount.service.ts con código de abajo.

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

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

increment() {
this.count++;
}

}

Usar el servicio para el uso de

Let el ClickcountService dentro de nuestro AppComponent para contar los clics de los botones.

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, en primer lugar, que importó el ClicksCountService de archivo ./clickscount.service.ts y añadimos a la clicksCount constructor privado: ClickscountService se dice angular para inyectar el ClickscountService a este componente.

No of clicks {{clicksCount.count}}

Problemas

Actualmente, tenemos un problema si tratamos de utilizar nuestro ClicksCountService en otros componentes de la misma instancia compartida entre todos los componentes de manera que podamos obtener un mal recuento clic.

Para resolver este problema también se puede inyectar una instancia de servicio en el nivel de componentes en lugar de inyectar en la raíz.

Ahora actualizar su archivo clickscount.service.ts mediante la eliminación de decorador @Injectable.

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

increment() {
this.count++;
}

}

Inyectar el servicio en el nivel de componente

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

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

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

En el código anterior hemos actualizado nuestra AppComponent mediante la adición de una matriz con los proveedores de valor ClickscountService de manera que su dice angular para inyectar la instancia Clickscountservice en AppComponent.

Código

repository