Как сделать мой поиск в Firestore повторяемым?

Question

Фон

У меня есть функция поиска на веб-сайте, который использует 'array-contains', чтобы показать пользователю все продукты, которые соответствуют поисковому запросу. Это работает при наличии ввода в компоненте nav, который передает поиск по параметрам запроса в компонент результатов.

Nav:

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable, of } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'src/app/user/email-login/user.model';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { switchMap } from 'rxjs/operators';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-shell',
  templateUrl: './shell.component.html',
  styleUrls: ['./shell.component.scss']
})
export class ShellComponent {

  user$: Observable<User>;
  searchResult;
  userID: string;

  isHandset$: Observable<boolean> = this.breakpointObserver.observe([Breakpoints.Handset])
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(private breakpointObserver: BreakpointObserver, public afAuth: AngularFireAuth, private db: AngularFirestore, private router: Router) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          console.log('I just logged someone in!')
          return this.db.doc<User>('users/${user.uid}').valueChanges();
        }
        else{
          return of (null);
        }
      })
    )
  }

  search(event: any){
    var searchQuery;
    searchQuery = event.target.value;
    console.log('routing');
    let userSearch: NavigationExtras = {
      queryParams: {
        searchValue: searchQuery
      }
    }
    this.router.navigate(['search-results'], userSearch);
  }
}

Результат поиска:

import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.scss']
})
export class SearchResultsComponent implements OnInit, OnChanges {

  searchQuery: string;
  searchResults;
  collectionRef;

  constructor(private route: ActivatedRoute, private db: AngularFirestore) {
    console.log('being loaded..');
    this.route.queryParams.subscribe(search =>{
      this.searchQuery = search.searchValue;
    });
  }

  ngOnInit() {
    this.searchResults = this.db.collection('products', ref => ref.where('keywords', 'array-contains', this.searchQuery)).valueChanges();
  }

  ngOnChanges(changes: SimpleChanges){ // You need to update here the searchQuery
    this.route.queryParams.subscribe(search =>{
      this.searchQuery = search.searchValue;
      this.searchResults = this.db.collection('products', ref => 
    ref.where('keywords', 'array-contains', this.searchQuery)).valueChanges();
  });

  console.log(changes);
}

}

Проблема

Поиск работает, как ожидается, при выполнении со страницы однако, кроме страницы результатов поиска, в случае, если пользователь выполняет поиск, перенаправляется на страницу результатов и выполняет другой поиск, результаты не обновляются, поскольку «результаты поиска» не запускаются снова ( несмотря на то, что функция поиска в nav срабатывает ».

Как я могу изменить свое решение, чтобы пользователи могли выполнять другой поиск после первого? Я уверен, что упускаю что-то очевидное, но я не уверен, что .

Рабочий пример: https://padder-939bc.firebaseapp.com/

Доступные критерии поиска для тестирования: «черный», «синий», «белый»

Answer 1

Вы не можете обновить данные для результата поиска, потому что вы инициализируете searchQuery в конструкторе, который вызывается один раз.

Вы должны обновить searchQuery в функции Angular с именем ngOnChanges как показано ниже:

Результаты поиска:

constructor(private route: ActivatedRoute, private db: AngularFirestore) {
    console.log('being loaded..');
    this.route.queryParams.subscribe(search =>{
        this.searchQuery = search.searchValue;
    });
}

ngOnInit() {
    this.searchResults = this.db.collection('products', ref => 
      ref.where('keywords', 'array-contains', this.searchQuery)).valueChanges();
}

ngOnChanges(changes: SimpleChanges){ // You need to update here the searchQuery

      this.route.queryParams.subscribe(search =>{
        this.searchQuery = search.searchValue;
        this.searchResults = this.db.collection('products', ref => 
      ref.where('keywords', 'array-contains', this.searchQuery)).valueChanges();
    });
 }

Дайте мне знать, если это работает.