如何去抖动内部组件的@Output? [英] how do I debounce the @Output of an inner component?

问题描述

我有一个组件，它包装另一个组件 并绑定到 InnerComponent.innerChanged() 自定义事件.我想使用 @output 属性冒泡，但我也想对输出进行去抖动.

我如何使用 RxJS .debounce() 或 .debounceTime() 来做到这一点?

像这样:

import {Component, Output, EventEmitter} from 'angular2/core';导入 'rxjs/add/operator/debounce';导入 'rxjs/add/operator/debounceTime';@零件({选择器:'去抖动组件'，模板:`<div><h1>去抖动的外部分量</h1>//导出类 InnerComponent{//@Output() innerChanged: new EventEmitter();//onKeyUp(value){//this.innerChanged.emit(value);//}//}<input #inner type="text" (innerChange)="onInnerChange(inner.value)">

`})导出类 DebouncedComponent {@Output() outerValueChanged: new EventEmitter();构造函数(){}onInnerChange(value) {this.outerValuedChanged.emit(value);//我想 debounce() 这个.}}

解决方案

要使值去抖动，您可以使用主题.一个主题既是可观察的又是观察者.这意味着您可以将其视为可观察对象并将值传递给它.

您可以利用它来将新值从内部组件传递给它并以这种方式去抖动.

export class DebouncedComponent {@Output() outerValueChanged: new EventEmitter();const debouncer:主题<字符串>= 新主题<字符串>();构造函数(){//您在此处收听去抖动的值//在每个值上，调用外部组件去抖动器.去抖动时间(100).subscribe((value) => this.outerValuedChanged.emit(value));}onInnerChange(value) {//将每个值从内部发送到主题debouncer.next(值);}}

这是未经测试的伪代码.你可以在这里看到这个概念的一个工作示例(http://jsbin.com/bexiqeq/15/编辑?js，控制台).它没有角度，但概念保持不变.

<小时>

更新:对于较新版本的 Angular，您可能需要稍作修改:将 debouncer.debounceTime(100) 更改为 debouncer.pipe(debounceTime(100)))

constructor() {//您在此处收听去抖动的值//在每个值上，调用外部组件去抖动器.pipe(debounceTime(100)).subscribe((value) => this.outerValuedChanged.emit(value));}

I have a component that wraps another component <inner-component> and binds to the InnerComponent.innerChanged() custom event. I want to bubble up using an @output property, but I also want to debounce the output.

How do I use RxJS .debounce() or .debounceTime() to do this?

Something like this:

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.
  }
}

解决方案

To debounce values you could use a Subject. A subject is both an observable and a observer. This means you can treat it as an observable and pass values to it as well.

You could leverage this to pass the new values from the inner-component to it and debounce it this way.

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);
  }
}

This is untested pseudo-code. You can see a working example of the concept here (http://jsbin.com/bexiqeq/15/edit?js,console). It's without angular but the concept remains the same.

---

Update: For newer versions of Angular you might need a slight: change debouncer.debounceTime(100) gets changed to 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));
}

这篇关于如何去抖动内部组件的@Output?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！