在 Angular v4 中，是否可以使用 Google 翻译 API 发送文本并接收翻译？答案

【问题标题】：In Angular v4, is it possible to use the Google translator API to send it text, and receive a translation?在 Angular v4 中，是否可以使用 Google 翻译 API 发送文本并接收翻译？
【发布时间】：2018-07-17 01:27:12
【问题描述】：

如果是的话，怎么做？我正在学习 webapp 的东西。我正在尝试做一个翻译。我已经设置了我的 html 来接收输入字符串。但现在我不知道如何进行。我正在浏览谷歌翻译 api 文档here，我看到了一些适用于 Node 的东西，但我不确定这是否适用于 Angular。我应该导入什么？一个朋友提到了ajax请求，我该怎么办？

任何帮助或指向一个好的方向都会非常有帮助。谢谢！

【问题讨论】：

是的，如果您使用 Angular 的 HTTP 客户端发出 POST 请求。请参阅：cloud.google.com/translate/docs/…，了解您需要在 POST 中发送的内容。
如果您还没有，我强烈建议您阅读 Angular.io 上的“英雄之旅”教程：angular.io/tutorial 最后一章处理 HTTP 请求。

标签： ajax angular google-translate

【解决方案1】：

 component.TS
......................................

ngAfterViewInit() {
        var v = document.createElement("script");
        v.type = "text/javascript";
        v.innerHTML = "function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } ";
        this.elementRef.nativeElement.appendChild(v);
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
        this.elementRef.nativeElement.appendChild(s);
    }

&lt;div id="google_translate_element"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这将使您更接近，使用 Angular HttpClient 发送带有参数的 Get，但您必须做额外的工作来加载您的 API 密钥并处理授权响应。请按照首先提到的 Angular 教程进行操作。 https://angular.io/tutorial

https://stackblitz.com/edit/angular-httpclient-ex5

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
apiKey = ''
url = 'https://translation.googleapis.com/language/translate';
result: any;
q: any;

constructor(private http: HttpClient) {}  

translate(): void {
 let params = new HttpParams();
 params = params.append('q', this.q);
 params = params.append('target', 'es');
 params = params.append('key ', this.apiKey);

 this.http.get(this.url, {params: params})
   .subscribe(response => this.result = response);

}

【讨论】：

非常感谢。现在正在阅读教程，但这也很有帮助。
嘿，所以我正在处理 apiKey，我不确定应该使用 google 提供的 json 文件中的哪些字段。他们有一个字段 private_key_id 和 private_key（更长）。我已经尝试了这两种方法，只是将值复制并粘贴到代码中，以便 apiKey 等于 google json 文件中的值，但我收到以下错误： No 'Access-Control-Allow-Origin' header is present on the请求的资源。因此，Origin 'localhost:4200' 不允许访问。响应的 HTTP 状态代码为 404。我在这里遗漏了什么？谢谢
所以我从谷歌得到了钥匙。想通了，但现在我仍然收到 access-control-allow-origin 错误。会是什么？
'Access-Control-Allow-Origin'表示请求的源IP地址没有被授权访问服务器。您必须进入您的 Google API 配置并选择凭据，然后为 Web 应用程序“创建客户端 ID”，并添加一个“授权的 JavaScript 源”，即您的源的 IP 地址。
我做到了。仍然得到同样的错误。我一直在阅读有关 CORS 的信息。你可能知道如何实现它？再次感谢所有帮助！