如何在angular 2应用程序中添加google translator？ 我的网页

大家好

翻译本页：

您可以通过在选择框中选择语言来翻译此页面的内容

函数googleTranslateElementInit（）{ 新的google.translate.TranslateElement（{pageLanguage'en'}，'google_translate_element'）； }

---

这就是我的代码的样子。。。让你开始。注意：这是不安全的，也不是“生产就绪”。这只是开始使用API的一个小示例应用程序

注意：这是Angular v6，与Angular v2不兼容

<div class="m-content">
    <h1>My Web Page</h1>

    <p>Hello everybody!</p>

    <p>Translate this page:</p>

    <div id="google_translate_element"></div>
    <p>You can translate the content of this page by selecting a language in the select box.</p>
</div>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    }
</script>

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient，HttpErrorResponse，HttpHeaders，HttpParams}；
从“rxjs”导入{observatable，throwerr}；
从“rxjs/operators”导入{catchError，tap，map}；
从“./translate”导入{TranslateResponse}；
@注射的({
providedIn:'根'
})
导出类TranslateService{
私有API_密钥='您的密钥在此'；
私人翻译公司https://translation.googleapis.com/language/translate/v2?key=“+this.API_键；
构造函数（私有http:HttpClient）{}
translate（textToTranslate:string，target:string）：可观察{
const headers=新的HttpHeaders({
“内容类型”：“应用程序/json”，
接受：'application/json'
});
常数体={
“q”：textToTranslate，
"来源":"en",，
“目标”：目标
}
返回this.http.post（this.translateUrl，body，{headers:headers}）.pipe(
轻触（result=>console.log（'result:'+JSON.stringify（result）），
映射（结果=>result.data.translations[0].translatedText），
catchError（this.handleError）
);
}
私有句柄错误（错误：HttpErrorResponse）{
//在现实世界的应用程序中，我们可能会将服务器发送到某些远程日志记录基础设施
//而不仅仅是将其记录到控制台
让errorMessage=''；
if（error.error instanceof ErrorEvent）{
//发生客户端或网络错误。请相应地进行处理。
errorMessage=`发生错误：${err.error.message}`；
}否则{
//后端返回了一个不成功的响应代码。
//回应主体可能包含了错误的线索，
errorMessage=`服务器返回代码：${err.status}，错误消息为：${err.message}`；
}
控制台错误（错误消息）；
返回投掷器（错误消息）；
}
}

使用您的标题、正文和translateUrl以及有效的Apikey-效果非常好！谢谢：）

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { TranslateResponse } from './translate';

@Injectable({
  providedIn: 'root'
})
export class TranslateService {
  private API_KEY = 'your key here';
  private translateUrl = 'https://translation.googleapis.com/language/translate/v2?key='+this.API_KEY;

  constructor(private http: HttpClient) { }

  translate(textToTranslate: string, target: string): Observable<string> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      Accept: 'application/json'
    });

    const body = {
      'q': textToTranslate,
      'source': 'en',
      'target': target
    }

    return this.http.post<any>(this.translateUrl, body, { headers: headers }).pipe(
      tap(result => console.log('Result: ' + JSON.stringify(result))),
      map(result => result.data.translations[0].translatedText),
      catchError(this.handleError)
    );
  }

  private handleError(err: HttpErrorResponse) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}