El servicio es una clase especial en Angular que se usa principalmente para la comunicación entre componentes. A veces, hay componentes que necesitan un grupo común para interactuar entre sí, principalmente para la adquisición de datos o información. El servicio lo hace posible. Los dos (o más) componentes pueden o no estar relacionados entre sí. Eso significa que puede existir una relación padre-hijo o nada en absoluto.
Los servicios y otras dependencias se inyectan directamente en el constructor del componente de esta manera:
constructor(private _myService: MyService) {
}
Al hacer esto, en realidad estamos creando una instancia del servicio. Eso significa que tenemos que acceder a todas las variables y métodos públicos del servicio.
Para crear un nuevo servicio, podemos usar la herramienta de andamiaje de código:
// Generate service ng g s my-custom-service
Inyectar un servicio en un componente es bastante sencillo. Digamos que tenemos un servicio llamado MyCustomService . Así es como podemos inyectarlo en un componente:
MyCustomComponent.ts
import {...} from "@angular/core";
import { MyCustomService } from "../...PATH";
@Component({
selector: "...",
templateUrl: "...",
styleUrls: ["..."],
})
export class MyCustomComponent {
// INJECTING SERVICE INTO THE CONSTRUCTOR
constructor(private _myCustomService: MyCustomService) {}
// USING THE SERVICE MEMBERS
this._myCustomService.sampleMethod();
}
Esto puede no tener ningún sentido hasta que ya menos que nos ensuciemos las manos. Entonces, creemos rápidamente un servicio y veamos cómo se inyecta y se puede acceder fácilmente. Para esta demostración, crearemos dos componentes personalizados simples. Digamos, señoras y señores. No existe una relación padre-hijo entre estos dos componentes. Ambos son absolutamente independientes. Los caballeros saludarán a las damas con un «Buenos días» con solo hacer clic en un botón. Para ello, utilizaremos un servicio que interactuará entre los dos componentes. Lo llamaremos InteractionService.
Lo primero es lo primero, crearemos nuestros 2 componentes y 1 servicio.
Ahora tenemos todo lo que necesitamos. Dado que esta demostración es particularmente para la inyección de servicios. No discutiremos los componentes en detalle. Comencemos con el servicio primero. Aquí está el código:
interaction.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class InteractionService {
private _messageSource = new Subject<string>();
greeting$=this._messageSource.asObservable();
sendMessage(message: string) {
this._messageSource.next(message);
}
}
Esto se ha hecho. Ahora inyectaremos este servicio en nuestros dos componentes.
gentlemen.component.html
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Welcome To GFG</h2> <button (click)="greetLadies()">Greet</button> </body> </html>
Ahora crearemos el primer componente usando:
// Generate component ng g c gentlemen
gentlemen.component.ts
import {...} from "@angular/core";
...
import { InteractionService } from "../services/interaction.service";
@Component({
selector: "app-gentlemen",
templateUrl: "./gentlemen.component.html",
styleUrls: ["./gentlemen.component.scss"],
})
export class GentlemenComponent {
// SERVICE INJECTION
constructor(private _interactionService: InteractionService) {}
greetLadies() {
this._interactionService.sendMessage("Good morning");
}
}
Cree rápidamente nuestro último componente:
// Generate component ng g c ladies
ladies.component.ts
import {...} from "@angular/core";
...
import { InteractionService } from "../services/interaction.service";
@Component({
selector: "app-ladies",
templateUrl: "./ladies.component.html",
styleUrls: ["./ladies.component.scss"],
})
export class LadiesComponent implements OnInit {
// SERVICE INJECTION
constructor(private _interactionService: InteractionService) {}
ngOnInit() {
this._interactionService.greeting$.subscribe(message => {
console.log(message);
})
}
}
Así es como podemos inyectar y usar el servicio para interactuar entre componentes. Acabamos de ver un caso de uso de inyección de servicio.
Tendremos este como nuestro producto final:
Captura de pantalla de UI/UX
Al hacer clic en los botones, podemos esperar el siguiente resultado:
Rendimiento esperado
Publicación traducida automáticamente
Artículo escrito por Tanzeel Mirza y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA