首页 文章

如何在角度6中使用谷歌Transliterate?

提问于
浏览
0

我使用下面的代码 . 这在index.html中有效

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

<script type="text/javascript">
    // Load the Google Transliterate API
    google.load("elements", "1", {
      packages: "transliteration"
    });

    function onLoad() {
      if (google.elements.transliteration.isBrowserCompatible()) {
        var options = {
          sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
          destinationLanguage: [google.elements.transliteration.LanguageCode.SINHALESE],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
          new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(['transliterateTextarea']);
      } else {
        document.getElementById('errorDiv').innerHTML = 'Sorry! Your browser does not support transliteration';
      }
    }

    google.setOnLoadCallback(onLoad);

  </script>

在更改此代码之后 .

Ts Component

import { Component, OnInit } from '@angular/core';  
declare var google:any;

@零件({
选择器:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.css']})

export class AppComponent implements OnInit {   
 title = 'translate';  
 public sinhalaText: string;   

 constructor() { 
         google.load('elements','1', { packages: 'transliteration'});
         google.setOnLoadCallback(this.onLoad);     
 }

 ngOnInit() {}



onLoad() {
     const sinhalOptions = {
       sourceLanguage:
         google.elements.transliteration.LanguageCode.ENGLISH,
       destinationLanguage:
         [google.elements.transliteration.LanguageCode.SINHALESE],
       shortcutKey: 'ctrl+s',
       transliterationEnabled: true
     };
     const tamilOptions = {
       sourceLanguage:
         google.elements.transliteration.LanguageCode.ENGLISH,
       destinationLanguage:
         [google.elements.transliteration.LanguageCode.TAMIL],
       shortcutKey: 'ctrl+t',
       transliterationEnabled: true
     };
     const sinhalaControl = new google.elements.transliteration.TransliterationControl(sinhalOptions);
     const elements = document.getElementsByClassName('sinhalaText');>         sinhalaControl.makeTransliteratable(elements);
     // const sinhalaControl = new google.elements.transliteration.TransliterationControl(sinhalOptions);
     // sinhalaControl.makeTransliteratable(this.sinhalaText);   
    }



 }

html comonent

<textarea [(ngModel)]="sinhalaText" id="sinhalaText" style="width:600px;height:200px"></textarea>

index.html

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

这不起作用 .

该代码适用于angular.html的index.html文件 . 但是我要求将代码嵌入到角度应用程序的组件内部 . 怎么样?

1 回答

  • 0

    请使用良好的livecyle函数: AfterViewInit 等待HTML包含在DOM中 .

    在TS

    @ViewChild('sinhalaTextInput') sinhalaTextInput: ElementRef;
    
    ngAfterViewInit() {
        ...
        google.setOnLoadCallback(() => this.onLoad()); // Don't lose "this" context 
    }
    
    private onLoad() {
        ...
        const elements = this.sinhalaTextInput.nativeElement;
        ...
    }
    

    在HTML中

    <textarea #sinhalaTextInput [(ngModel)]="sinhalaText" id="sinhalaText" style="width:600px;height:200px"></textarea>
    

相关问题