Angular 2 - 解決keyUp事件

如何解決在「keyUp」事件中調用的函數？Angular 2 - 解決keyUp事件

這裏是我的代碼：

我的功能

private handleSearch(searchTextValue: string, skip?: number): void { 
    this.searchTextValue = searchTextValue; 
    if (this.skip === 0 || typeof skip === "undefined") { 
     this.skip = 0; 
     this.pageIndex = 1; 
    } else { 
     this.skip = skip; 
    } 
    this.searchTextChanged.emit({ searchTextValue: searchTextValue, skip: this.skip, take: this.itemsPerPage }); 
}

我的HTML

<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">

Bassically我想要實現的是handleSearch被稱爲用戶停止輸入後的很短時間。

我發現我可以使用lodash的_debounce()這個，但我還沒有找到如何把這個放在我的keyUp事件。

來源

2017-03-13 Nicolas

您可以創建一個rxjs/Subject並在keyup上調用.next（）並使用所需的debounceTime進行訂閱。

我不確定這是否是正確的方式來做到這一點，但它的工作原理。

private subject: Subject<string> = new Subject(); 

ngOnInit() { 
    this.subject.debounceTime(500).subscribe(searchTextValue => { 
    this.handleSearch(searchTextValue); 
    }); 
} 

onKeyUp(searchTextValue: string){ 
    this.subject.next(searchTextValue); 
}

HTML：

<input (keyup)="onKeyUp(searchText.value)">

來源

2017-03-13 10:23:27 Ploppy

如何可以將參數傳遞給'ngOnInit（）{ this.subject.debounceTime（500）.subscribe（RES => {//做某事}）; }'？ – Nicolas

您可以將您的搜索查詢傳遞給onKeyUp（），然後將其傳遞給.next（），然後它將成爲訂閱中的「res」變量。在使用字符串時，務必將主題從更改爲主題。讓我編輯答案。 – Ploppy

如果我有1個可選參數？我應該把它們放在一個物體上嗎？在OP中我依靠'searchTextValue'和'skip'這是可選的 – Nicolas

Angular 2 - 解決keyUp事件

回答

相關問題