Javascript navbar中的Searchbar调用HTTP请求，希望返回的数据填充到另一个组件中

我正在建立一个网站，允许人们搜索啤酒，并返回有关啤酒的数据。用户单击search按钮，它运行我在服务上设置的http请求。所有显示都很好。但是我要做的是将我的搜索表单从显示组件移动到导航栏中。如何将导航栏上的搜索表单链接到查看组件

这是搜索表单当前所在的home.component（单击search运行下面的“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() {
 }
}

编辑…以前有错误的服务。。。。。 啤酒搜索服务：

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>'}
    });
 }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
出口类BeerSearch服务{
构造函数（私有http:HttpClient）{}
搜索啤酒（名称）{
让数据={
查询：`{beerSearch（查询：`+name+`）{items{id，name，style{description}，description，overallScore，
imageUrl、abv、brewer{name、facebook、web}}`，
变量：“{}”，
操作名称：null
}
返回此.http.post（'https://api.r8.beer/v1/api/graphql/",数据,{
标题：{
'x-api-key'：''}
});
}
}

---

如果我将搜索栏移动到navbar组件，如何调用此searchBeer函数？

您将API调用的结果存储到服务中的

BehaviorSubject

，从

navbar

调用从API和组件中获取啤酒的方法，而不是订阅API结果，订阅

Observable

（来自啤酒的

行为主题

——您的数据）：

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();
  }
}

Component.ts

export class NavbarComponent implements OnInit {

   constructor(private beerSearchService: BeerSearchService) {}

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

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();
  }
}

---

谢谢。我是angular的新手，我觉得自己做得不错，但我意识到还有很多东西需要学习……我从未见过像Behavior subject这样的程序。我需要学习更多，尤其是RXJS的东西。我要在youtube上搜索这个主题。所以在component.ts上，我现在使用OnTest，我不再需要OnInit了roy？？别担心，你做得很好，首先你的问题没有被否决：）如果你是认真对待角度的，一定要看看Rxjs（可观察的，受试者）还有一些操作符，比如filter，switchMap。可能需要一段时间来适应它，但一旦你习惯了它，就会有很大的帮助。看看

async

管道的角度。你可能需要

ngOnInit

来处理其他东西，但不需要连接这些东西。只需注意，你应该总是取消订阅Observable，以避免内存泄漏，而ch就是我在Ngondestory中所做的。快乐编码。