Compartir datos entre los componentes usando la unión de propiedades/eventos con la ayuda de decoradores @Input/@Output ayuda a hacer nuestros componentes independientes. Esta estrategia hace que nuestros componentes sean fácilmente reutilizables y puedan ser probados fácilmente.
Sin embargo, a medida que nuestra aplicación crece y nuestros componentes se vuelven más complejos con el anidamiento profundo con el tiempo, se hace difícil manejar el flujo de datos usando estos decoradores @Input/@Output.
En tales escenarios, es más eficiente pasar datos entre los componentes utilizando un servicio compartido. Un servicio es simplemente una clase angular que actúa como un depósito central.
Actualicemos nuestro ejemplo para usar tal servicio compartido para pasar datos, en lugar de usar la vinculación de propiedad/evento.
Vamos a crear un nuevo servicio llamado CourseService como se indica a continuación:
1234567891011121314151617181920importar{EventoEmisor,Inyectable}de$0027@angular/núcleo$0027;importar{Curso}de$0027./curso.modelo$0027;importar{CursoServicio}de$0027../curso. servicio$0027;@Injectable()exportclassCursoServicio{cursos privados:Curso[]=[nuevoCurso($0027Curso Angular 1$0027,$0027Este es simplemente un curso angular de práctica 1$0027,$0027http://via. digital.com/350x150.jpeg$0027),newCourse($0027Curso Angular 2$0027,$0027Este es simplemente un curso angular de práctica 2$0027,$0027http://via.digital.com/350x150$0027),newCourse($0027Curso Angular 3$0027,$0027Este es simplemente un curso angular de práctica 3$0027,$0027http://via.digital.com/350x150$0027)];constructor(){}getCourses(){returnthis.courses.slice();}}javascript
Observe arriba que estamos devolviendo una copia de los «cursos» usando slice() y no el array original para que no pueda ser modificado fuera de este servicio.
Ahora que tenemos la matriz/modelo de «cursos» como parte del servicio, eliminémoslo de nuestra lista de componentes de cursos. Dentro de CourseListComponent, accederemos a los cursos usando el método getCourses() definido en nuestro CourseService. Sólo tenemos que definir el CourseService en nuestro constructor ya que queremos que el servicio se inyecte aquí. Así que nuestra Lista de Cursos se vería como abajo:
1234567891011121314151617181920import{Componente,OnInit}de$0027@angular/core$0027;import{Curso}de$0027../modelo de curso$0027;import{CursoServicio}de$0027../servicio.de.curso$0027;@Componente({ selector:$0027app-course-list$0027, templateUrl:$0027./lista de curso. component.html$0027, styleUrls:[$0027./course-list.component.css$0027]})exportclassCourseListComponentientimentsOnInit{ courses:Course[];constructor(private courseService:CourseService){}ngOnInit(){this.courses=this.courseService.getCourses();}}javascript
También actualizaremos el código para que el manejo de eventos sea a través de servicios. Para ello, añadiremos «courseSelected» como una propiedad en el CourseService.
12345@Injectable()exportclassCourseService{ courseSelected =newEventEmitter<Course;();}javascript
Abajo está la plantilla de nuestro componente de elementos del curso:
12345678910111213141516<a(click)="onSelected()"<div>h4;{{{curso.nombre }}}</h4 description }}</pñal;/div;²;span;²;img[src]="course.courseImagePath "alt="{{ course.name }}"html
Dentro del método onSelected(), ahora invocaremos el método emit() sobre la propiedad «courseSelected» definida en el servicio. Así es como se vería nuestro CourseItemComponent (después de introducir el servicio):
12345678910111213141516171819importar{Componente,OnInit,Entrada,Emisor de eventos,Salida}de$0027@angular/núcleo$0027;importar{Curso}de$0027../../modelo de curso$0027;importar{Servicio de curso}de$0027../../servicio de curso$0027;@Componente({ selector:$0027app-course-item$0027, plantillaUrl:$0027./curso-ítem. component.html$0027, styleUrls:[$0027./course-item.component.css$0027]})exportclassCourseItemComponentientimentsOnInit{@Input() course:Course:constructor(curso privadoService:CourseService){}ngOnInit(){}onSelected(){this.courseService.courseSelected.emit(this.course);}}javascript
Ahora podemos escuchar/suscribirnos a este evento en nuestro AppComponent. Así que en nuestro AppComponent, actualizaremos el método ngOnInit() para suscribirnos al evento «courseSelected» arriba mencionado y también añadiremos «CourseService» al array del proveedor. A continuación se muestra cómo se vería el AppComponent:
12345678910111213141516171819202122import{Componente,OnInit}de$0027@angular/core$0027;import{Curso}de$0027./course.model$0027;import{CursoServicio}de$0027./course.service$0027;@Componente({ selector:$0027app-root$0027, templateUrl:$0027./app.component.html$0027, styleUrls:[$0027./app.component. css$0027], proveedores:[RecipeService]})exportclassAppComponentimentsOnInit{ selectedCourse:Course:Course;constructor(private courseService:CourseService){}ngOnInit(){this.courseService.courseSelected.subscribe((course:Course)={ {this.selectedCourse= course;});}}javascript