मैं एक आंतरिक घटक के @Output को कैसे रद्द कर सकता हूं?

Question

मेरे पास एक घटक है जो एक और घटक <inner-component> लपेटता है और 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. 
    } 
} 

Answer 1

मूल्यों debounce के लिए आप एक विषय इस्तेमाल कर सकते हैं। एक विषय एक अवलोकन और पर्यवेक्षक दोनों है। इसका मतलब है कि आप इसे एक अवलोकन योग्य और पास मूल्यों के रूप में भी इलाज कर सकते हैं।

आप आंतरिक मूल्य से नए मूल्यों को पारित करने के लिए इसका लाभ उठा सकते हैं और इसे इस तरह से अस्वीकार कर सकते हैं।

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

यह अनचाहे छद्म कोड है। आप यहां अवधारणा का एक कामकाजी उदाहरण देख सकते हैं (http://jsbin.com/bexiqeq/15/edit?js,console)। यह कोणीय के बिना है लेकिन अवधारणा वही बना हुआ है।

Answer 2

यहाँ सभी आवश्यक आयात के साथ एक काम कर उदाहरण क्लास, कोणीय 4+, टाइपप्रति और tslint के अनुकूल है :) सोचा था कि यह कुछ लोगों को मैं क्या क्षण पहले देख रहा था की तलाश में मदद कर सकता है है!

import { Component, Input, Output, EventEmitter, ViewChild, OnDestroy } from '@angular/core'; 
 
import { Subject } from 'rxjs/Subject'; 
 
import { Subscription } from 'rxjs/Subscription'; 
 
import 'rxjs/add/operator/debounceTime'; 
 

 
@Component({ 
 
    selector: 'app-searchbox', 
 
    template: ` 
 
    <input type="text" autocomplete="off" [(ngModel)]="query" [placeholder]="placeholder" (change)="onInputChange($event)"> 
 
    ` 
 
}) 
 
export class SearchboxComponent implements OnDestroy { 
 
    @Input() debounceTime = 500; 
 
    @Output() change = new EventEmitter<string>(); 
 

 
    query = ''; 
 
    placeholder = 'Search...'; 
 
    results; 
 

 
    debouncer = new Subject<string>(); 
 
    subs = new Array<Subscription>(); 
 

 
    constructor() { 
 
    this.subs.push(this.debouncer.debounceTime(this.debounceTime).subscribe(
 
     (value: string) => { this.change.emit(value); }, 
 
     (error) => { console.log(error); } 
 
    )); 
 
    } 
 

 
    onInputChange(event: any) { 
 
    this.debouncer.next(event.target.value); 
 
    } 
 

 
    ngOnDestroy() { 
 
    for (const sub of this.subs) { 
 
     sub.unsubscribe(); 
 
    } 
 
    } 
 
}