我有一个包装另一个组件<inner-component>
并绑定(bind)到InnerComponent.innerChanged()
自定义事件的组件。我想使用@output
属性进行冒泡,但我也想对输出进行去抖动。
如何使用RxJS
.debounce()
或.debounceTime()
执行此操作?
像这样:
import {Component, Output, EventEmitter} from 'angular2/core';
import 'rxjs/add/operator/debounce';
import 'rxjs/add/operator/debounceTime';
@Component({
selector: 'debounced-component',
template: `
<div>
<h1>Debounced Outer Component</h1>
// export class InnerComponent{
// @Output() innerChanged: new EventEmitter<string>();
// onKeyUp(value){
// this.innerChanged.emit(value);
// }
// }
<input #inner type="text" (innerChange)="onInnerChange(inner.value)">
</div>
`
})
export class DebouncedComponent {
@Output() outerValueChanged: new EventEmitter<string>();
constructor() {}
onInnerChange(value) {
this.outerValuedChanged.emit(value); // I want to debounce() this.
}
}
最佳答案
要去抖动值,可以使用“主题”。主题既是可观察的,又是观察者。这意味着您可以将其视为可观察的对象,也可以将值传递给它。
您可以利用它来将新值从内部组件传递给它,然后以这种方式对其进行去抖动。
export class DebouncedComponent {
@Output() outerValueChanged: new EventEmitter<string>();
const debouncer: Subject<string> = new Subject<string>();
constructor() {
// you listen to values here which are debounced
// on every value, you call the outer component
debouncer
.debounceTime(100)
.subscribe((value) => this.outerValuedChanged.emit(value));
}
onInnerChange(value) {
// send every value from the inner to the subject
debouncer.next(value);
}
}
这是未经测试的伪代码。您可以在此处(http://jsbin.com/bexiqeq/15/edit?js,console)看到该概念的有效示例。它没有 Angular ,但是概念保持不变。
更新:对于较新版本的Angular,您可能需要一点:将
debouncer.debounceTime(100)
更改为debouncer.pipe(debounceTime(100))
constructor() {
// you listen to values here which are debounced
// on every value, you call the outer component
debouncer
.pipe(debounceTime(100))
.subscribe((value) => this.outerValuedChanged.emit(value));
}
关于javascript - 如何消除内部组件的@Output的反跳?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39959102/