如何在Angular 2中使用RxJS"throttle"操作符

Question

下面是我的组件代码,我试图使用RxJS"throttle"操作符.

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'类型的参数.

我在做什么错.

Answer 1

正如其他人所建议throttle()的那样,Observable不是持续时间.但是,您所描述的内容更适合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().