Отправлять входное значение поиска дочерним компонентам в Angular 2

В приложении Angular 2 у меня есть ввод для поиска HTML, значение которого я хочу отправить в 3 дочерних компонента, только если пользователь перестает печатать на 300 мс и набрал что-то отличное от того, что содержалось на вводе. Я прочитал несколько статей в Интернете, и все они упоминают использование операторов 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)">

Я хочу передать полученное значение дочерним компонентам, но чувствую себя немного потерянным. Я пробовал это, но это не сработало:

РОДИТЕЛЬСКИЙ ШАБЛОН

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

(И в дочернем компоненте app-object-tree создайте @Input searchFilter и подпишитесь на него, чтобы попытаться получить значение.)

Для меня имеет смысл создать службу, предоставить ее в родительском компоненте и подписаться на нее в дочерних компонентах, но я не знаю, как вызвать функцию 'setter' службы после применения 'debounceTime' и 'independentUntilChanged 'операции.

Большое спасибо, и извините, если я не объяснил себя правильно, я все еще пытаюсь связать все концепции Subject / Observable в моем сознании.


javascript angular rxjs angular2-observables
person Fel    schedule 29.09.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Зачем для этого нужен наблюдаемый объект или 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 в родительском элементе. В детстве ничего не надо наблюдать, просто будет обновляться.

person Senthe    schedule 29.09.2017
comment
Вы совершенно правы, в этом случае EventEmitter не нужен. Я реализовал ваше решение, и оно отлично работает. В дочерних компонентах я создал средство установки свойства @Input, и каждый раз, когда пользователь вводит любой поисковый запрос, он передается дочерним элементам. Спасибо! - person Fel; 29.09.2017