Post Top Ad

Your Ad Spot

miércoles, 14 de octubre de 2020

Inyección de dependencia de servicio angular

 

Los servicios en Angular se utilizan para definir datos y lógica que no están asociados con una vista particular que se puede compartir entre componentes. En este tutorial, aprenderemos cómo crear un servicio y luego hacer uso de la inyección de dependencia para usar ese servicio en un componente o clase determinados. Si ha trabajado con la inyección de dependencias en cualquier otro lenguaje de programación orientado a objetos, se sentirá como en casa.


Crear la clase de servicio

Un servicio es solo clase con un propósito específico. Puede utilizar una clase de servicio para las funciones que deberían ser reutilizables en todos los componentes. Su comportamiento es independiente de cualquier componente. También sirven para permitirle tener menos código en cualquier clase de componente en particular, ya que simplemente inyecta lo que necesita como dependencia. Aquí, crearemos un servicio que obtenga la lista de juegos para nuestra aplicación.

crear archivo para servicio angular


game.service.ts

El formato de un servicio es bastante similar a la creación de un archivo de TypeScript de componentes con la diferencia de que usamos el decorador @Injectable () .


Registrar el servicio

Para utilizar el servicio, debe estar registrado en Angular. Esto crea una única instancia de la clase de servicio, que luego es administrada por Angular Injector. Para registrar nuestro servicio, podemos pasar el objeto provideIn : 'root'} al Decorador @Injectable () .


Inyectar el servicio en un componente

Para usar el servicio que ahora está registrado, podemos usar Dependency Injection para pasar una instancia de la clase de servicio a la clase de componente. Esto se hace en el constructor y se resalta a continuación.


game-list.component.ts

Observe en el fragmento anterior en el enlace del ciclo de vida ngOnInit () que podemos hacer uso de un método que existe en la clase de servicio externo ( getGames () ). Esto es posible porque el servicio se inyectó anteriormente en esta clase de componente. ¡Ordenado!

Ahora, al ver la aplicación, la lista de juegos sigue ahí. No cambiamos mucho ninguna funcionalidad, pero sí completamos un refactor de código . Moviendo la responsabilidad de ir a buscar los juegos fuera de juego-list.component.ts , y en game.service.ts - hemos hecho el componente de lista de juegos hacer menos trabajo por su propia cuenta, por lo tanto, que significa menos código y la sintaxis más limpia. Además, si hay otros componentes a los que les gustaría obtener una lista de juegos, también podrían simplemente inyectar una instancia de la clase de servicio y hacerlo. Este es un patrón muy popular en casi todos los estilos de programación orientada a objetos.
datos de recuperación angular del servicio


Resumen

En este tutorial aprendimos cómo crear una nueva clase de servicio en Angular, luego usamos la inyección de dependencia para usarla en cualquier lugar que queramos.

  • La construcción de un servicio sigue el mismo esquema general de la construcción de un componente.
  • Nombra la clase para que represente lo que hace
  • Utilice PascalCasing como una cuestión de convención
  • Agrega "Servicio" al nombre de la clase
  • Mientras que los componentes usan el decorador @Component () , los servicios usarán el decorador @Injectable ()
  • Registre el servicio pasando un objeto al decorador @Injectable () con el conjunto de propiedades proporcionadoIn
  • Para usar la clase de servicio en un componente, inyecte ese servicio en el componente mediante el constructor de clases



No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas