Как передать входную переменную в сервис Angular

Question

Я работаю над веб-проектом Angular, и мне трудно передать пользовательское поле ввода в службу для получения запроса на конечную точку API.

, поэтому переназначаю inputKeyword в page.component .ts для ввода в service.ts

Мне нужно будет сделать это правильно

page.component. html

<input id="search" type="text"  [(ngModel)]="inputKeyword" name="search" />


 <button  (click)="searchData()"> Search </button>

page.component .ts

inputKeyword :  string = ''; 


 searchData(){ 
      return this.googleService.getData().subscribe(x =>{
        this.googleData= x.items;
        console.log("input ",this.inputKeyword)
        this.inputKeyword = this.googleService.input;
        console.log(this.googleData)
       }, error => {
         console.log(error)
       })

 }

data.service.ts

input;

getData() {
    return   this.http.get('url?key='
     + environment.apiKey + '&cx=' + environment.cx + '&q=' + this.input)
  }

Answer 1

Вы подписываетесь на метод из службы, где свойство input не определено. Вы назначаете значение только в подписке, что в данном случае неверно.

Ваш метод из службы должен быть таким:

getData(input: string) {
   return   this.http.get('url?key='
    + environment.apiKey + '&cx=' + environment.cx + '&q=' + input)
 }

А в компоненте вы передаете inputKeyword свойство в качестве аргумента этого метода, например, так:

searchData(){ 
      return this.googleService.getData(this.inputKeyword).subscribe(x =>{
        this.googleData= x.items;
        console.log(this.googleData)
       }, error => {
         console.log(error)
       })