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事件

回答

相关问题