Emettre recherche valeur d'entrée aux composants enfants dans Angular 2

Question

Dans une application Angular 2, j'ai une entrée de recherche HTML dont la valeur que je veux envoyer à 3 composants enfants, seulement si l'utilisateur arrête de taper pendant 300ms et il a tapé quelque chose de différent quelle entrée contenait. J'ai lu quelques articles sur Internet et tous mentionnent l'utilisation des opérateurs Subject, debounceTime et distinctUntilChanged. À la suite de l'un des tutoriels, j'ai fini avec le code suivant:

VOLET PARENT:

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

TEMPLATE MÈRE:

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

Je veux transmettre la valeur émise à les composants de l'enfant mais je me sens un peu perdu. J'ai essayé cela, mais ça n'a pas:

PARENT TEMPLATE

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

(Et, dans le composant enfant app-objet-tree ", créer" Filtre de recherche du @input et abonnez-vous pour essayer d'obtenir la valeur.)

Il me semble plus logique de créer un service, de le fournir dans le composant parent et de s'y abonner sur les composants enfants, mais je ne sais pas comment appeler la fonction de service 'setter' après avoir appliqué les opérations 'debounceTime' et 'distinctUntilChanged'.

Merci beaucoup, et désolé si je ne me suis pas expliqué correctement, j'essaie toujours de lier tous les concepts Objet/Observable dans mon esprit.

Answer 1

Pourquoi avez-vous besoin d'un Observable ou EventEmitter pour cela? Je ne pense pas qu'il soit possible d'émettre des événements aux enfants. Mais vous pouvez simplement passer une variable. Dans le contrôleur parent:

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

dans le modèle parent:

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

La valeur @input (searchFilter) va maintenant mettre à jour chaque fois que des enfants du searchValue des changements parents. Il n'y a pas besoin d'observer quoi que ce soit chez les enfants, il sera simplement mis à jour.