Saltar al contenido

Cambiando a la más reciente observable con switchMap

Veamos ahora cómo podemos usar el operador switchMap en el enrutamiento angular. Podemos usar el operador switchMap con la ruta activada.

Primero, importa los tokens del router, de la ruta activada y del ParamMap del paquete del router. Luego, importa el operador switchMap porque lo necesitarás más adelante para procesar los parámetros de ruta observables. Como es habitual, escribirás un constructor que pide a Angular que inyecte los servicios que el componente requiere y los referencie como variables privadas.

Cambiando a la más reciente observable con switchMap
Cambiando a la más reciente observable con switchMap

Más tarde, en el método ngOnInit, utilizará el servicio ActivatedRoute para recuperar los parámetros de la ruta, sacar el ID del empleado de los parámetros y recuperar el empleado para mostrarlo. El procesamiento de los parámetros es un poco complicado. Cuando el mapa cambie, obtendrás() el parámetro ID de los parámetros cambiados. Podrías pensar que ahora es el momento de usar el operador de mapas RxJS pero el operador EmployeeService devuelve un Observable. Así que, en su lugar, aplanas el observable con el operador switchMap. El operador switchMap también cancela las solicitudes previas en el vuelo. Si el usuario vuelve a navegar por esta ruta con un nuevo ID mientras el EmployeeService todavía está recuperando el ID antiguo, switchMap descarta la solicitud antigua y devuelve al empleado para el nuevo ID.

Nombre de archivo: employe-detail.component.ts

123456789101112131415161718192021222324252627282930import{ switchMap }de$0027rxjs/operadores$0027;import{Componente,OnInit}de$0027@angular/núcleo$0027;import{Enrutador,RutaActivada,ParamMap}de$0027@angular/enrutador$0027;import{Observable}de$0027rxjs$0027;import{Servicio de Empleados}de$0027. ./empleado.servicio$0027;import{Empleado}de $0027../empleado; @Componente({ selector:$0027app-empleado-detalle$0027, plantillaUrl:$0027./empleado-detalle. component.html$0027, styleUrls:[$0027./empleado-detalle.component.css$0027]})exportclassEmployeeDetailComponentimentsOnInit{ employee$:Observable<Hero>;constructor(ruta privada:Ruta activada,enrutador privado:Enrutador,servicio privado:Servicio de empleado){}ngOnInit(){esto. employee$=esta.ruta.paramMap.pipe(switchMap((params:ParamMap)=.servicio.getEmpleado(params.get($0027id$0027)));}}}

tipografía

Veamos otro ejemplo de la funcionalidad de búsqueda de los empleados. Explorando este ejemplo, podremos entender las características del operador switchMap().

Nombre de archivo: search.component.html

12345678<input(keyup)="search($event.target.value)" placeholder="Search"/ <ul><li *ngFor="let employee of employee$ | async"³;b>{{{empleado. nombre}} v.{{{{{{i} dirección del empleado}}}</b&<i};{{{i} descripción del empleado}}</i>;

tipografía

La vinculación de eventos (keyup) envía cada pulsación de tecla al método de búsqueda() del componente. Enviar una solicitud por cada tecla pulsada podría ser costoso. Es mejor esperar a que el usuario deje de escribir y luego enviar una solicitud. Eso es fácil de implementar con los operadores RxJS, como se muestra en este extracto.

Nombre de archivo: search.component.ts

123456789101112131415161718 conRefresh =false;employees$:Observable<NpmEmployeeInfo[]>private searchText$ =newSubject<string>();search(employeeName:string){this.searchText$.next(employeeName);}ngOnInit(){this. employees$=this.searchText$.pipe(debounceTime(500),distinctUntilChanged(),switchMap(nombre_de_empleado==;this.searchService.search(nombre_de_empleado,this.withRefresh));}constructor(private searchService:EmployeeSearchService){}

tipografía

El searchText$ es la secuencia de valores del cuadro de búsqueda que vienen del usuario. Se define como un sujeto RxJS, lo que significa que es un observable multidifusión que también puede producir valores por sí mismo llamando a next(value), como ocurre en el método search().En lugar de reenviar cada valor searchText directamente al EmployeeSearchService inyectado, el código en ngOnInit() canaliza los valores de búsqueda a través de tres operadores:

  • debounceTime(500) – espera a que el usuario deje de escribir (1/2 segundo en este caso).
  • distinctUntilChanged() – espera hasta que el texto de la búsqueda cambie.
  • switchMap() – envía la solicitud de búsqueda al servicio.

El operador switchMap() tiene tres características importantes.

  • Se necesita un argumento de función que devuelva un observable. EmployeeSearchService.search devuelve un observable, como otros métodos de servicio de datos.
  • Si una solicitud de búsqueda anterior sigue en vuelo (como cuando la conexión es pobre), cancela esa solicitud y envía una nueva.
  • Devuelve las respuestas de servicio en su orden de solicitud original, incluso si el servidor las devuelve fuera de servicio.