angular4 订阅网络服务

Question

我有一个 Web 服务在 Angular4 中调用 Google 自定义搜索 API（使用 Observable），我在我的组件中调用它（通过 Observer 和 mergemap 运算符）。整个功能还涉及 Material Design md-input 和 ng-ngx-bootstrap Typeahead。一切都在 OnInit 中完成，每次页面为 opened/refreshed 时，它都会触发对我的 google 搜索服务的调用，并提供一个空查询。仅当 string 作为参数传递时，如何才能触发对我的搜索服务的调用？我是 Angular4 和 RxJS Observable 的新手，我的代码可能并不完全正确，所以我愿意 comments/ideas/suggestions.

分量：

public value = '';
public dataSource: Observable<any>;
public subs: Subscription;

constructor(private searchService: SearchService) { }

ngOnInit() {
  this.dataSource = Observable
    .create((observer: Observer<any>) => {
      observer.next(this.value);
      observer.complete();
    })
    .mergeMap((token: string) => this.searchService.getSearch(this.value));
  this.subs = this.dataSource.subscribe(x => console.log(x));
}

模板：

<md-input-container class="w-75">
  <input mdInput [(ngModel)]="value"
    [typeahead]="dataSource"
    (typeaheadLoading)="changeTypeaheadLoading($event)"
    (typeaheadNoResults)="changeTypeaheadNoResults($event)"
    (typeaheadOnSelect)="typeaheadOnSelect($event)"
    typeaheadOptionsLimit="10"
    typeaheadOptionField="title"
    typeaheadWaitMs="250"
    typeaheadMinLength="3"
    [typeaheadItemTemplate]="customItemTemplate"
    placeholder="Entrez votre recherche ici">
  <span *ngIf="typeaheadLoading===true"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i></span>
  <div *ngIf="typeaheadNoResults===true">
    <i class="fa fa-times-circle-o" aria-hidden="true"></i> Aucun résultat.
  </div>
  <md-hint align="end">rechercher dans la sphère éducative</md-hint>
</md-input-container>
<button type="submit" [routerLink]="resultUrl()" md-mini-fab><i class="fa fa-search"></i></button>

Answer 1

替换行

.mergeMap((token: string) => this.searchService.getSearch(this.value));

和

.mergeMap((token: string) => token ? this.searchService.getSearch(this.value) : Observable.of([]));

因此只有在有任何标记或搜索词时才会调用您的服务，否则您 return 一个空数组

angular4 订阅网络服务

angular4 subscribe to a web service

web-services

rxjs

google-custom-search

angular