angular4訂閱網絡服務

我有一個Web服務在Angular4中調用Google Custom Search API（使用Observable），我在組件中調用它（通過Observer和mergemap運算符）。整個功能還涉及Material Design md-input和ng-ngx-bootstrap Typeahead。一切都在OnInit中完成，每次頁面打開/刷新時都會觸發一次對我的谷歌搜索服務的調用，並顯示一個空的查詢。只有當string作爲參數傳遞時，我如何才能觸發對我的搜索服務的呼叫？我是Angular4和RxJS Observable的新手，我的代碼可能不完全正確，所以我願意接受評論/想法/建議。angular4訂閱網絡服務

組件：

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>

來源

2017-09-05 arsrobota

試圖尋找到ngModelChange叫或搜索詞人。 – Swoox

更換線

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

與

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

所以，你的服務將只在有任何記號返回一個空數組

來源

2017-09-05 10:37:00

它的工作原理！坦克你非常多Karan，我試圖找出什麼是該令牌的作用。 – arsrobota

這裏的令牌是你輸入到你的輸入（鍵入） –

如果解決方案爲你工作，那麼你可以把它標記爲有用/最好，這樣的問題可以有用的其他用戶 –

angular4訂閱網絡服務

回答

相關問題