Angular 5基本搜索组件

Question

我有一个搜索组件。这有一个模板，基本上只是一个输入字段和一个按钮。在提交时，我要求它从我的API加载数据。此数据需要显示在我的搜索结果组件中。

我的搜索组件如下所示：

search(f) {
  this.router.navigate(['/item/search/' + f.value.itemSearch]);
}

此路线呈现搜索结果组件。这样做的好处是用户可以手动更改URL以搜索他们想要的内容/项目/搜索/其他内容。

搜索结果组件中的代码：

ngOnInit() {
  this.subscription = this.route.params
  .switchMap(params => {
    this.postcode = params['item'] || '';
    return this.service.search(this.item);
  })
  .subscribe(
    items => this.items = items
  );

}

我遇到的问题是每当搜索完成并返回404/400时，它都会正确显示没有找到数据。但是，使用搜索组件的后续搜索不执行任我可以重新输入数据并重新点击提交并更改URL，但不会再次执行搜索。有任何想法吗？

希望一切都有道理： - /

加成：

search(item: string): Observable<any> {
  const search = new URLSearchParams();
  search.set('item', item);
  return this.http.get(this._apiUrl, { search })
    .map(response => response.json())
    .catch(this.handleError);
}

Answer 1

假设你的handleError方法实际上并没有处理错误，而是在执行时传播它

this.subscription = this.route.params
  .switchMap(params => {
    this.postcode = params['item'] || '';
    return this.service.search(this.item);
  })
  .subscribe(
    items => this.items = items
  );

如果搜索observable发出错误，则整个可观察管道停止，并停留在其终端错误状态。因此，无论params可观察到的发射都无关紧要：事件将不再被接收。

你需要通过返回一个非错误的observable来实际处理错误。就像是

this.subscription = this.route.params
  .switchMap(params => {
    this.postcode = params['item'] || '';
    return this.service.search(this.item).catch(() -> {
      // display no result somehow
      return Observable.empty());
    });
  })
  .subscribe(
    items => this.items = items
  );