Question

我在搜索时填充的页面上有一个搜索栏和结果窗格。我想要做的是在单击链接时清除结果，以便不再显示结果。

HTML

<input type="text" [ngFormControl]="term" class="form-control" placeholder="Search.."/>

<div *ngFor="let result of results | async" class="row search-suggestions">
            <a [routerLink]="['company', result.CompanyId, 'overview']">{{result.CompanyName}}</a>
</div>

组件

export class SearchApp {
  results: Observable<Array<any>>;
  term = new Control();

  constructor(private _router: Router,
    private _searchService: SearchService) {

    this.results = this.term.valueChanges
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this._searchService.getSearchResult(term));
  }
}

我尝试订阅路由器事件并清除数组：

  ngOnInit() {
    this._router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.results = Observable.of([]);
      }
    });
  }

但是当我这样做并执行搜索时，_searchService甚至没有被调用（没有网络流量）。

我看到有人在这里询问当用户使用退格键擦除搜索词时如何清除数组，这对我来说当用户点击路由器链接时这对我有用，但它似乎不是最好的方式这样做（我甚至不知道它是如何工作的）？

this._router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
    this.results = this.term.valueChanges
      .switchMap((term: string) =>
        0 < term.length ? this._searchService.getSearchResult(term) : Observable.of([]));
  }
});

Answer 1

您的SearchService应该为Observable提供从term.valueChanges Observable构建的搜索结果。并依赖Router订阅您编写的导航更改。

在Angular2中单击routerlink时如何清除Observable数组？

1 个答案: