来自角度应用程序的牛津词典 API 调用？答案

【问题标题】：Oxford dictionary API call from angular app?来自角度应用程序的牛津词典 API 调用？
【发布时间】：2018-11-06 19:40:45
【问题描述】：

我正在尝试使用牛津词典 API 实现个人词典：https://developer.oxforddictionaries.com/documentation

我做了一个proxy.conf.json文件来实现API调用，代码如下：

{
    "/oxfordapi": {
      "target": "https://od-api.oxforddictionaries.com/api/v1/entries/en/",
      "secure": true,
      "changeOrigin": true,
      "logLevel": "debug",
      "headers": {
        "Accept": "application/json",
        "app_id": "933daf11",
        "app_key": "34bef88a5c41a2d98f35d8783c887ec0"
      },
      "pathRewrite": {"^/oxfordapi" : ""}
    }
  }

现在我正在尝试使用该服务从我的组件文件中调用它：

component.ts:

    ngOnInit() {

               this.gotHttpService.getDictonaryData().subscribe(
                  data => {

                    this.dictData = data;
                    console.log(this.dictData);

                  } ,
                  error => {
                    console.log("some error occured");
                    console.log(error.errorMessage);
                  }
                );



      }

这里是 service.ts 文件：

export class GotHttpService {
  word: String = "aardvark";
  constructor(private _http: HttpClient) {
    console.log("BlogHttpService is called")
      }
      private handleError(err: HttpErrorResponse) {
        console.log("Handle error Http calls")
        console.log(err.message);
        return Observable.throw(err.message);
      }
              getDictonaryData(): any {
                let myResponse = this._http.get('/oxfordapi/' + this.word);
                return myResponse;

              }
}

component.html:

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

但是如何通过从输入 ngmodel 中获取单词并将其传递给 getDictonaryData() 方法来获取单词相关数据来进行 api 调用。

非常感谢任何形式的建议。这也是使用 Angular 获取牛津词典 API 数据的唯一方法吗？

【问题讨论】：

如果你想把它传递给getDictionaryData，那么你需要给那个函数添加一个参数
你应该使用 Observables，去抖动...看一个例子 - 不是牛津词典 dzone.com/articles/…

标签： angular

【解决方案1】：

<input id="name" type="text" [(ngModel)]="name" (change)="getDictonaryData()"/>

component.ts:

getDictonaryData() {
// Do code to fetch from this.dictData
}

【讨论】：

【解决方案2】：

<input id="name" type="text" [(ngModel)]="name" (change)="getDictonaryData()"/>

//pass name parameter into your service function like below

component.ts:
    name:string;
    ngOnInit() {

               this.gotHttpService.getDictonaryData(this.name).subscribe(
                  data => {

                    this.dictData = data;
                    console.log(this.dictData);

                  } ,
                  error => {
                    console.log("some error occured");
                    console.log(error.errorMessage);
                  }
                );



      }
//pass parameter in your service function also like below 

export class GotHttpService {
  word: String = "aardvark";
  constructor(private _http: HttpClient) {
    console.log("BlogHttpService is called")
      }
      private handleError(err: HttpErrorResponse) {
        console.log("Handle error Http calls")
        console.log(err.message);
        return Observable.throw(err.message);
      }
              getDictonaryData(word:any): any {
                let myResponse = this._http.get('/oxfordapi/' + word);
                return myResponse;

              }
}

【讨论】：

【解决方案3】：

这是steps 和code 所需的解决方案：

步骤：

您的[(ngModel)]="name" 会将单词存储在this.name
当您点击按钮getData() 时，将调用该方法将this.name 发送到服务功能
在您的服务中使用名称参数，如果存在名称，请发送那个名字getDictonaryData(name?)

代码：

HTML：

<input id="name" type="text" [(ngModel)]="name"/>
<button (click)="getData()"> Get Data </button>

组件：

getData() {
    this.gotHttpService.getDictonaryData(this.name).subscribe(
        data => {
            this.dictData = data;
            console.log(this.dictData);
        } ,
        error => {
            console.log("some error occured");
            console.log(error.errorMessage);
        }
    );

}

服务：

export class GotHttpService {
    word: String = "aardvark";
    constructor(private _http: HttpClient) {
        console.log("BlogHttpService is called")
    }
    private handleError(err: HttpErrorResponse) {
        console.log("Handle error Http calls")
        console.log(err.message);
        return Observable.throw(err.message);
    }
    getDictonaryData(name?): any {
        if(name){
            this.word = name
        }
    let myResponse = this._http.get('/oxfordapi/' + this.word);
    return myResponse;

    }
}

【讨论】：