如何使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。

您必须在Angular的一个名为ngOnChanges的函数中更新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();
});
}

如果有效，请告诉我。