Angular 2: отображать результаты поиска в другом компоненте

Мое поле поиска находится в отдельном компоненте. Нет проблем с отображением имен в списке предложений при поиске, потому что я не показываю их в другом компоненте.

Поиск HTML

<input type="text" placeholder="Search" (keyup)="getSuggestion($event.target.value)">
<div class="suggestion" *ngIf="results.length > 0 && suggest === true">
     <div *ngFor="let result of results" class="search-res" (click)="showEmployee(result._id)"> {{ result.name }} </div>
</div>
<div class="suggestion" *ngIf="results.length === 0 && suggest === true">
     <div> No results found </div>
</div>

Компонент поиска

getSuggestion(name) {
    $('.suggestion').show();
    this.searchService
        .getSuggestion(name)
        .subscribe(
            name => this.results = name,
            error => alert(error),
        );
  }

Но как насчет того, чтобы отобразить его в другом компоненте (компоненте списка) в событии change?

Что нужно добавить в поле ввода в качестве вызова функции? и что я должен поместить в SearchComponent, чтобы результаты отображались в компоненте списка?

Служба поиска

getSuggestion(name:string): Observable<any> {
        return this.http
        .get(this.serverUrl + 'name/' + name)
        .map(this.extractData)
        .catch(this.handleError);
}

person Char    schedule 28.06.2017    source источник


Ответы (1)


У вас есть тема в вашем SearchService. Имея субъект, вам не нужно сообщать другому компоненту, что пришел новый результат. Как только есть результат, представление автоматически обновляется.

private results = new BehaviorSubject([]);

public getResults$(){
   return this.results.asObservable();
}

public search(params){
   //do search and add results to 'results'
   this.results.next(response);
}

В вашем компоненте списка

constructor(private searchService: SearchService){
   searchService.getResults$()
                 .subscribe(res){
                     this.results = res;
                  };
}

В вашем HTML

<div *ngIf="results.length>0" >
   <!-- show results -->
</div>

Точный код для вашего случая:

Компонент поиска HTML

<input type="text" 
       placeholder="Search" 
       (keyup)="getSuggestion($event.target.value)">

Компонент поиска ts

public getSuggestion(name){
    this.searchService.getSuggestion(name);
}

Служба поиска

private results = new BehaviorSubject([]);

public getResults$(){
   return results.asObservable();
}

public getSuggestion(name:string) {
    this.http
    .get(this.serverUrl + 'name/' + name)
    .map(this.extractData)
    .subscribe(
        response => this.results.next(response),
        this.handleError
    );
}

Компонент списка ts public results = null;

constructor(private searchService: SearchService){
    serachService.getResults$()
                 .subscribe(resultList: any[] => {
                      this.results = resultList;
                  });
}

Список компонентов HTML

<div class="suggestion" 
     *ngIf="results && results.length > 0 ">
     <div *ngFor="let result of results"
           class="search-res" 
           (click)="showEmployee(result._id)"
      > {{ result.name }} </div>
</div>
<div class="suggestion" 
     *ngIf="results && results.length === 0 && suggest === true">
     <div> No results found </div>
</div>

Установив для результатов значение null, мы узнаем, был ли выполнен поисковый вызов. Если результаты не нулевые, а пустые, мы будем знать, что результаты поиска пусты.

person Vamshi    schedule 28.06.2017
comment
В SearchService мне нужно создать этот общедоступный поиск (параметры)? @Скептор - person Char; 28.06.2017
comment
Да, именно здесь вы выполняете логику поиска. Из SearchComponent вы будете называть его . В вашем случае это getSuggestion - person Vamshi; 28.06.2017
comment
Я добавил код getSuggestion из SearchService. Большое спасибо @Skeptor - person Char; 28.06.2017
comment
Я не тестировал код. так что дайте мне знать, если выдает какую-либо ошибку или не работает - person Vamshi; 28.06.2017
comment
Возникает ошибка, когда я оставляю поле поиска пустым после поиска @Skeptor - person Char; 28.06.2017
comment
Давайте продолжим обсуждение в чате. - person Char; 28.06.2017
comment
Я заставил его работать, следуя фрагментам кода. Ключевой концепцией, которую я сначала не понял, было то, что массив results в ListComponent становится связанным в конструкторе с results в SearchService, который имеет тип BehaviourSubject. Это наблюдаемое, и элементы результата будут добавлены к нему с помощью метода next. +1 - person Miguel Reyes; 14.06.2019