Панель поиска внутри navbar вызывает HTTP-запрос, хочет, чтобы возвращаемые данные заполнялись в другом компоненте

Question

Я создаю сайт, который позволяет искать пиво, и он возвращает данные об этом пиве.Пользователь нажимает кнопку поиска, и он запускает http-запрос, который я настроил для службы.Все отображается нормально.Но то, что я пытаюсь сделать, это переместить мою форму поиска из отображающего компонента, чтобы быть внутри панели навигации.Как связать форму поиска на панели навигации с компонентом просмотра?

здесь находится home.component, где в настоящее время находится форма поиска (при щелчке по поиску запускается функция «searchBeer» ниже, передающая искомое имя пива:

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private beerSearchService:BeerSearchService) { }
beerName:string;
beers:{};
selectedBeer: {};

searchBeer(beerName){
  this.beers=null;
  this.beerSearchService.searchBeer(beerName)
  .subscribe(data => console.log(this.beers=data));
  this.selectedBeer=null;
 }

 onSelect(beer): void {
 this.selectedBeer = beer;
 console.log(beer);
 }

 ngOnInit() {
 }
}

EDIT ... Hadнеправильный сервис перед ..... beer-search.service:

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class BeerSearchService{

constructor(private http: HttpClient) { }

searchBeer(name){

let data= {
  query: `{beerSearch(query:"`+name+`"){items{id, name, style {description}, description, overallScore,
   imageUrl, abv, brewer {name, facebook, web}}}}`,
  variables:"{}",
  operationName:null
}

return this.http.post('https://api.r8.beer/v1/api/graphql/', data, {
  headers:{
     'x-api-key': '<API-KEY>'}
    });
 }
}

Если я переместу панель поиска на компонент navbar, как мне вызвать эту функцию searchBeer?

Answer 1

Вы сохраняете результаты вызова API для BehaviorSubject в службе, из navbar вызываете метод для получения пива из API и в компоненте вместо подписки на результат API, подписывайтесь на Observable (из BehaviorSubjectBeerS - ваши данные):

BeerSearchService

export class BeerSearchService {

  private _beers = new BehaviorSubject<Beer[]>(null);

  constructor(private http: HttpClient) { }

  searchBeer(beerSearch?: string) {
    // do something with beerSearch parameter
    let data = {
      query: `  {topBeers{items{id, name, style {description}, description, 
       overallScore, imageUrl, abv, brewer {name, facebook, web}}}}`,
      variables:"{}",
      operationName:null
    };

    this.http.post('https://api.r8.beer/v1/api/graphql/', data, {
      headers: {'x-api-key': '<api-key>'}
      }).subscribe(data => {
        this._beers.next(data);
      });
  }

  get beers$() {
    return this._beers.asObservable();
  }
}

navbar.ts

export class NavbarComponent implements OnInit {

   constructor(private beerSearchService: BeerSearchService) {}

   searchBeer(beerName) {
     this.beerSearchService.searchBeer(beerName);
   }
}

Component.ts

export class HomeComponent implements OnDestroy {
  beers:{};
  sub: Subscription;

  constructor(private beerSearchService: BeerSearchService) {
    this.sub = this.beerSearchService.beers$.subscribe(beers => {
     this.beers = beers;
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}