如何在Angular 2中使用RxJS「節流」操作符

以下是我嘗試使用RxJS「節流」操作符的組件代碼。如何在Angular 2中使用RxJS「節流」操作符

import { Component , OnInit , OnChanges , DoCheck } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/fromEvent'; 
import 'rxjs/add/operator/throttle'; 

@Component({ 
    selector:'rx1', 
    template: ` 
    <h2> Rx1 Component </h2> 
    <button name="btn" valur="click"> 
}) 

export class Rx1Component implements OnInit { 

    ngOnInit() { 
     var button = document.getElementsByTagName('button'); 

     Observable.fromEvent(button, 'click') 
      .throttle(1000) 
      .subscribe(() => console.log('clicked....')); 
    } 
}

這個簡單示例的目的是僅當點擊之間存在1秒的最小間隔時打印「clicked ....」。

但是，當我編譯此代碼時，它顯示下面的錯誤，它指向「.throttle（1000）」行。

'number'類型的參數不能分配給'（value：{}）=> SubscribableOrPromise'類型的參數。

我在做什麼錯誤。

來源

2016-11-05 refactor

那麼，看看油門的文檔。它不期望持續時間作爲參數：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttle。也許你想throttleTime：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttleTime –

你使用的是什麼版本的rxjs打字稿聲明？你的代碼對我來說看起來很好，這讓我相信這個聲明文件是不好的。你能否在這裏粘貼打字稿聲明文件中的節流聲明？ –

@JB Nizet throttleTime已經奏效。 – refactor

正如其他人所建議的throttle()作爲一個參數可觀察不是持續時間。但是，您所描述的更適合於debounceTime()運營商。

有一兩件事值得一提的是，由於您使用的Angular2你總是使用RxJS 5，而不是老RxJS 4.我想你已經找到throttle這裏https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/throttle.md或http://reactivex.io/documentation/operators/debounce.html但這些都描述RxJS 4。

RxJS 5的正確文檔是http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttle，您可以看到有throttle()和throttleTime()。

來源

2016-11-05 22:02:12 martin

如何在Angular 2中使用RxJS「節流」操作符

回答

相關問題