如何将输入变量传递给服务Angular

Question

我正在处理一个Angular web项目，发现很难将用户输入字段传递给服务以获得API端点上的请求。

因此，将page.component.ts中的inputKeyword重新分配给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)
})