Bir iç bileşenin @Output değerini nasıl geri yüklerim?

Question

Başka bir bileşen <inner-component> sarar ve InnerComponent.innerChanged() özel etkinliğin bağlanan bir bileşen var. Ben bir @output özelliğini kullanarak kabarcıklandırmak istiyorum, ama ben de çıktıyı geri yüklemek istiyorum.

Bunu yapmak için RxJS.debounce() veya .debounceTime()'u nasıl kullanırım? Böyle

şey:

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

Answer 1

Bir Konu kullanabilirsiniz değerlerini sektirilmesini belirleyin. Bir konu hem gözlemlenebilir hem de gözlemci. Bu, onu gözlenebilir bir değer olarak ele alabilmeniz ve ona değer biçebilmeniz anlamına gelir.

Bunun ve gürültüye bu şekilde iç-bileşeninden yeni değerleri eklemek için bu kaldıraç olabilir.

export class DebouncedComponent { 
    @Output() outerValueChanged: new EventEmitter<string>(); 
    const debouncer: Subject = new Subject(); 

    constructor() { 
     // you listen to values here which are debounced 
     // on every value, you call the outer component 
     debouncer 
     .debounceTime(100) 
     .subscribe((val) => this.outerValuedChanged.emit(value)); 
    } 

    onInnerChange(value) { 
    // send every value from the inner to the subject 
    debouncer.next(value); 
    } 
} 

Bu denenmemiş sözde koddur. Buradaki konseptin çalışma örneğini görebilirsiniz (http://jsbin.com/bexiqeq/15/edit?js,console). Açısal değil ama konsept aynı kalıyor. İşte

Answer 2

tüm gerekli ithalat ile bir çalışma örneği Sınıf, Açısal 4+ :) typescript ve tslint dostu bazı insanlar anlar önce aradığı şeyi arayan yardımcı olabileceğini düşündüm olduğunu!