Для вашего случая существует лучшая практика: так называемые умные и глупые компоненты:
https://medium.com/@dan_abramov/smart-and-dumb-com... (это оригинальная статья от автора реакта, но в ангуляре принципы такие же)
В нашем случае компоненты search и result - глупые компоненты, которые только и делают, что возвращают строку ввода (search) и отображают данные (result). Так же у нас имеется умный компонент searchResults, который знает как отреагировать на данные из search и правильно отобразить result.
Search и Result ничего не должны знать об HttpService. Он в них не инжектится.
SearchComponent:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'search',
templateUrl: './result.component.html',
styleUrls: ['./result.component.scss']
})
export class SearchComponent {
public query: string;
@Output() onQuery: EventEmitter<string> = new EventEmitter();
constructor() {}
public handlerEnterSearch() {
this.onQuery.emit(this.query)
}
}
search.html:
<div class="input-group input-group-lg p-5">
<input
[(ngModel)]="query"
type="text"
class="form-control"
placeholder="Что ищем?"
(keyup.enter)="handlerEnterSearch()"
>
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="handlerEnterSearch()">Найти фильм</button>
</div>
</div>
result.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { HttpService } from '../http.service'
@Component({
selector: 'result',
templateUrl: './result.component.html',
styleUrls: ['./result.component.scss']
})
export class ResultComponent implements OnInit {
// Вот эти items выводятся в html результата
@Input()
items: any[];
constructor(){}
}
search-result.html:
<search (onQuery)="doSearch($event)">
<result [items]="result">
search-result.component.ts:
import { Component, OnInit } from '@angular/core';
import { HttpService } from '../http.service'
@Component({
selector: 'search-result',
templateUrl: './search-result.component.html',
styleUrls: ['./search-result.component.scss']
})
export class SearchResultComponent implements OnInit {
items:any[];
constructor(private httpService: HttpService){
}
// Вот это неудачная часть. Её можно сделать веселее, но для этого необходимо понимать как устроен RxJS.
// Я не знаю как это объяснить без написания отдельной статьи.
// На первое время такой подход сойдёт.
doSearch(query: string) {
this.httpService.getFilms(query).subscribe((items) => {
this.items = items;
})
}
}
Использование сервисов для передачи данных между компонентами в ангуляре - это самые распространённые грабли во фреймворке. Причём эти грабли настолько хитрые, что большинство программистов даже не понимает что ходит по ним. Самый верный способ не наступать на грабли - это забыть навсегда про private и public переменные в сервисах (другими словами сервис не должен иметь состояние). Без этого можно жить и причём легко и спокойно если начать использовать NxRx для хранения состояния системы.
Средний
Средний