如何在Angular 4/5中使用Google Transliterate API？附代码求助

我来帮你搞定在Angular 4/5里集成Google Transliterate API的事儿，顺便帮你排查现有代码的问题~

首先，你的代码思路是对的，但在Angular这种组件化框架里，直接写全局函数和裸操作DOM会有适配问题，下面是调整后的完整方案：

1. 先正确加载Google Transliterate脚本 #

不要在组件里直接用google.load，先在项目的index.html的<head>标签里引入官方脚本：

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

2. 组件内的正确实现方式 #

Angular是组件化框架，全局函数和直接操作DOM的写法会破坏组件封装性，而且TypeScript会因为找不到google变量报错。下面是修正后的组件代码：

import { Component, AfterViewInit } from '@angular/core';

// 声明全局的google变量，避免TypeScript类型检查报错
declare var google: any;

@Component({
  selector: 'app-transliterate-input',
  template: `
    <div>
      <label>输入英文转泰米尔语：</label>
      <input type="text" id="tamil-transliterate-input" class="form-control">
    </div>
  `
})
export class TransliterateInputComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 加载transliteration包，指定回调函数并绑定组件上下文
    google.load("elements", "1", {
      packages: "transliteration",
      callback: this.initTransliteration.bind(this)
    });
  }

  private initTransliteration(): void {
    const transliterationOptions = {
      sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage: [google.elements.transliteration.LanguageCode.TAMIL],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
    };

    // 创建TransliterationControl实例
    const transliterationControl = new google.elements.transliteration.TransliterationControl(transliterationOptions);
    // 将控件绑定到指定的input元素（注意要和template里的id对应）
    transliterationControl.makeTransliteratable(["tamil-transliterate-input"]);
  }
}

3. 你的原代码存在的问题 #

• 直接使用全局onLoad函数：Angular组件里应该把初始化逻辑放到生命周期钩子（比如ngAfterViewInit）里，确保DOM元素已经渲染完成
• 未声明google变量：TypeScript会识别不了全局的google对象，需要手动声明declare var google: any;
• 代码截断：你写的var elements = documen...应该是要获取DOM元素绑定 transliteration，上面的示例里用makeTransliteratable方法直接绑定元素ID，更简洁规范

额外注意事项 #

• 如果遇到google is not defined的错误，检查index.html里的脚本是否在Angular的主脚本之前加载
• 可以根据需求修改destinationLanguage数组，支持同时转多种语言
• 快捷键ctrl+g可以自定义，注意不要和浏览器或IDE的默认快捷键冲突

内容的提问来源于stack exchange，提问作者Sridhar