子要素への検索入力値を角2で出力する

Question

角2のアプリケーションでは、ユーザーが300msの入力をやめたときに3つの子要素に値を送るHTML検索入力があります。どの入力が含まれています。私はインターネット上でいくつかの記事を読んでおり、そのすべてにはSubject,debounceTime、distinctUntilChangedの演算子が使用されています。

親コンポーネント：

// Subject to emit an observable 
public searchUpdated: Subject <string> = new Subject<string>(); 

@Output() searchChangeEmitter: EventEmitter <any> = new EventEmitter <any>(); 

constructor() { 
    [.......] 
    this.searchChangeEmitter = <any>this.searchUpdated.asObservable() 
    .debounceTime(300) 
    .distinctUntilChanged(); // accept only relevant chars 
} 

onSearchType(value : string) { 
    this.searchUpdated.next(value); // Emit the changed value to the subscribers 
} 

親テンプレート：

<input class="input-group-field" type="search" id="inputSearch" name="inputSearch" (keyup)="onSearchType($event.target.value)"> 

私が放出された値を渡したいチュートリアルの1に続いて、私は次のコードになってしまいました子供のコンポーネントが、私は少し失われて感じている。私はこれを試してみたが、それはうまくいきませんでした：

親テンプレート

<app-object-tree [searchFilter]="searchChangeEmitter"></app-object-tree> 

（そして、子コンポーネントのアプリ・オブジェクト・ツリー」で、@Input「searchFilter」を作成し、それを購読して値を取得しようとしています）

サービスを作成して親コンポーネントで提供し、それを子コンポーネントでサブスクライブするのは、私にとっては意味がありますが、 'debounceTime'と 'distinctUntilChanged'操作を適用した後のサービス 'セッター'機能

ありがとう、私は自分自身を正しく説明していないと申し訳ありませんが、私はまだSubject/Observableのすべての概念を結びつけようとしています。

Answer 1

なぜこのような観測可能なEventEmitterが必要ですか？私は子供たちにイベントを出すことはできないと思います。しかし、単に変数を渡すことができます。親テンプレートで

searchValue: string; 
private _searchSubject: Subject<string> = new Subject(); 

constructor() { 
    [.......] 
    this._searchSubject 
    .debounceTime(200) 
    .distinctUntilChanged() 
    .subscribe(result => { 
     this.searchValue = result; 
    }); 
} 

onSearchType(value : string) { 
    this._searchSubject.next(value); 
} 

：親コントローラで

<input class="input-group-field" type="search" id="inputSearch" name="inputSearch" (keyup)="onSearchType($event.target.value)"> 
<app-object-tree [searchFilter]="searchValue"></app-object-tree> 

子供@Input値（searchFilter）は、現在、親の変更でsearchValueたびに更新されます。子供には何も観察する必要はなく、ただ更新されます。