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

Question

背景

我的网站上有搜索功能，它使用“array-contains”向用户显示与搜索查询匹配的所有产品。这是通过在“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();
    });
 }

让我知道它是否有效。