首次加载网站时 Google 音译 api 与 angular 9 问题

Question

我的 index.html 中有以下脚本标签：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

我还有一个单独的音译服务，我在其中从相应组件的 AfterViewInit() 方法调用 initializeTransliteration() 方法。

import { Injectable, OnInit } from "@angular/core";
import { Router } from "@angular/router";
declare var google:any; 

@Injectable()
export class Transliterate {
    constructor(private currentRouter:Router){}

    private async(){
      return new Promise(
        resolve=>{
          resolve( google.load("elements", "1", {packages:"transliteration", callback: ()=>{this.onLoad(this.currentRouter)} }) );
        }
      )
    }

    initializeTransliteration(){
      this.async().then(
        value =>{
          console.log(value);
        }
      );
    }

    private onLoad(router: Router){  
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['ta'],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

  var opt_options ={
          adjustElementStyle : false,
          adjustElementDirection: true
        }

  var nodesArray:Array<Object> = Array.prototype.slice.call(document.querySelectorAll("textarea#tamilTransliterate"));

  var control = new google.elements.transliteration.TransliterationControl(options);

  control.makeTransliteratable(['tamilTransliterate'], opt_options);      
  control.c.qc.t13n.c[3].c.d.keyup[0].ia.F.p = 'https://www.google.com';

      }
}

当我在清除缓存后第一次加载应用程序时，我在控制台上收到以下错误消息，并且我无法在文本区域进行音译。

loading elements other than inputtools with the jsapi loader is unsupported

但是，当我刷新浏览器几次后，这个问题就解决了，我可以音译我在文本区域中键入的文本。

我更新到 angular 9.

后开始出现这种情况

网站 URL：https://www.yaavarumkelir.com - 顶部导航栏上的搜索栏已启用音译。

有人可以帮我解决这个问题吗？

编辑：经过进一步调查，我发现 jsapi 调用有时会在新负载时收到 302，这就是发生这种情况的原因。为什么 google jsapi 调用会返回 302？是因为我的代码做错了什么吗？如果第一次返回 302，有人可以建议 cI 如何再次调用 jsapi 吗？

Answer 1

好的。经过一天尝试不同的方法后，以下方法目前似乎有效。

我复制了 https://www.google.com/jsapi 的内容并创建了一个新文件 jsapi.js。我将此文件放在服务器的 public 目录中。

我还将 index.html 文件中的脚本标记替换为：

<script defer type="text/javascript" src="jsapi.js"></script>

理由：我认为 google 存储库的响应可能很慢，在本地提供文件可能会解决问题，而且它似乎正在运行。如果我发现这种方法有任何问题，我会更新答案。

首次加载网站时 Google 音译 api 与 angular 9 问题

Issue with Google Transliteration api with angular 9 on loading the website for the first time

javascript

angular

google-api

angular9

jsapi