làm cách nào để tôi loại bỏ @Output của một thành phần bên trong?

Question

Tôi có một thành phần bao bọc một thành phần khác <inner-component> và liên kết với sự kiện tùy chỉnh InnerComponent.innerChanged(). Tôi muốn bong bóng bằng cách sử dụng một tài sản @output, nhưng tôi cũng muốn debounce đầu ra.

Làm cách nào để sử dụng RxJS.debounce() hoặc .debounceTime() để thực hiện việc này?

Something như thế này:

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 giá trị mà bạn có thể sử dụng một đề. Một chủ đề vừa là quan sát vừa là người quan sát. Điều này có nghĩa là bạn có thể coi nó là một giá trị quan sát và truyền cho nó.

Bạn có thể tận dụng điều này để chuyển các giá trị mới từ thành phần bên trong đến nó và loại bỏ nó theo cách này.

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

Đây là mã giả chưa được kiểm tra. Bạn có thể xem ví dụ làm việc của khái niệm tại đây (http://jsbin.com/bexiqeq/15/edit?js,console). Nó không có góc cạnh nhưng khái niệm vẫn giữ nguyên.

Answer 2

Đây là một ví dụ làm việc Lớp học với tất cả các nhập khẩu cần thiết, Góc 4+, TypeScript và tslint thân thiện :) nghĩ rằng nó có thể giúp một số người tìm kiếm những gì tôi đang tìm kiếm những giây phút trước!

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