如何使我的 Firestore 搜索可重复？

Question

背景

我的网站上有搜索功能，它使用“数组包含”向用户显示与搜索查询匹配的所有产品。这通过在 'nav' 组件中输入一个输入来实现，该组件将搜索通过 queryparams 传递到结果组件。

导航：

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);
}

}

问题

从搜索结果页面以外的页面执行搜索时，搜索会按预期工作，但是，如果用户进行搜索、被路由到结果页面并进行另一次搜索，则不会得到结果更新为“搜索结果”不再被触发（尽管导航中的搜索功能被触发'。

如何修改我的解决方案以允许用户在第一次搜索之后进行另一次搜索？我确定我遗漏了一些明显的东西，但我不确定是什么。

工作示例：https://padder-939bc.firebaseapp.com/

可用于测试的搜索条件：“黑色”、“蓝色”、“白色”

Answer 1

您无法更新搜索结果的数据，因为您正在调用一次的构造函数中初始化 searchQuery。

您必须在名为 ngOnChanges 的 Angular 函数中更新 searchQuery，如下所示：

搜索结果：

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();
    });
 }

让我知道它是否有效。