Basado en criterios de búsqueda recopilados de un formulario, tengo un método que devuelve observables de talentos.
getTalents(searchCriteria) { return this._allUsers$.pipe( tap((talents) => console.log(talents)), map((talents: any) => { let filtered = talents.filter( (t) => (t.userType === 'talent' || t.userType === 'both') && this.matchOccupationOrSkill( searchCriteria.occupation, t.occupation, t.skills ) ); if (searchCriteria.loggedInUserId) { filtered = filtered.filter( (t) => t.id !== searchCriteria.loggedInUserId ); } return filtered; }) ); }donde _allUsers$ es un observable compartido,
this._allUsers$ = firestore.collection<any>('users').valueChanges().pipe(share());Estoy llamando a getTalents dentro del método ngOnInit de un componente de ruta TalentSearchResult.
ngOnInit(): void { this.subs.add( this.route.queryParams.subscribe(params => { if (params.action==='homesearch' || params.action==='jobsearch'){ this.criteria = { occupation:params.occupation, industry:params.industry, loggedInUserId:params.loggedInUserId, } this.dataService.getTalents(this.criteria).pipe(take(1)).subscribe(talents => { this.count = talents.length; if (this.count >0){ this.Talents = talents.sort((p1,p2)=> p2.createdate-p1.createdate); } }) } }) ) }La búsqueda funciona por primera vez, luego, cuando regreso (usando el botón Atrás del navegador) y busco con un nuevo criterio, se enruta correctamente al componente TalentSearchResult, sin embargo, se devuelve la lista obsoleta. Depuré y encontré que la línea 3 en la primera sección de código anterior, es decir, tap((talents) => console.log(talents)) ya registra el valor obsoleto, ¡incluso antes de que se ejecute la canalización/mapa/filtro! Por favor aconséjame
Si está utilizando _allUsers$ o dataService.getTalents() en otra parte de la aplicación, debe reemplazar share() con shareReplay(1) . El uso de share() permite que varios suscriptores accedan a un observable, pero los suscriptores tardíos no obtendrán ningún dato hasta que .valueChanges() emita un nuevo valor. El uso shareReplay(1) permitirá que los suscriptores tardíos obtengan inmediatamente su último valor almacenado en caché.
Si está seguro de que este es el único componente que se suscribe a estos observables, es posible que su componente no esté cerrando las suscripciones correctamente. Esto puede deberse a las suscripciones anidadas (un antipatrón) que tiene dentro de su evento ngOnInit() . Recomendaría cambiar esta lógica para utilizar operadores:
this.subs.add( this.route.queryParams.pipe( filter(({ action }) => ['homesearch', 'jobsearch'].includes(action)), map(({ occupation, industry, loggedInUserId }) => ({ occupation, industry, loggedInUserId })), switchMap(criteria => this.dataService.getTalents(criteria).pipe(take(1)) ), filter(talents => !!talents.length), tap(talents => this.Talents = talents.sort((p1, p2) => p2.createdate - p1.createdate)) ).subscribe() );