1

У меня есть следующая структура приложения Angular2.Angular2: Связь между родственными компонентами

Внутри app.html файла

<search></search> 
<search-results></search-results> 

Оба SearchComponent и SearchResultsComponent являются отдельными компонентами. У меня также есть услуга, как показано ниже

Внутри файла сервис

.... 
    getFilteredData(input:string): Observable <any>{ 
    return this.http.get(`${this.URL}${input}&api_key=DEMO_KEY`) 
     .map(response => response.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'server error')); 
    } 
.... 

Внутри SearchComponent У меня есть шаблон с полем ввода и кнопки, как так:

.... 
    <input type="text" class="form-control" id="input" 
     [(ngModel)]="model.input" name="input" #ipnut="ngModel"> 
    </div> 
    <button type="submit" class="btn btn-primary">Search</button> 
.... 

Проблема: Что такое лучший способ позволить службе выполнить и передать результаты в SearchResultsComponent? Я знаю, что я должен подписаться на Observable getFilteredData, но как я могу инициировать сам поиск (т. Е. Передавать данные из ввода формы в службу после нажатия кнопки)

+0

Немного больше контекста было бы полезно. Я не могу понять, в чем проблема. –

ответ

0

Создайте мастер-сервис (который создается один раз и используется как с помощью компонента поиска, так и результата поиска).

Внутри этой службы создайте тему (предмет поведения или предмет воспроизведения).

Используйте этот объект в компоненте поиска, чтобы испускать данные в этом слове поиска.

Теперь подпишитесь на этот вопрос в компоненте «результат поиска» и в своем успехе вызовите функцию «getFilteredData» с указанными здесь параметрами поиска, которые вы получили от подписки на тему.

Надеюсь, это поможет.

Смежные вопросы