1

我在我的 Angular 项目中使用谷歌音译 api。我的注册组件中有几个字段需要音译。我有一个单独的服务来加载谷歌音译包。在我的主页中，我有一个通过 routerLink 绑定注册页面的链接。当我从主页单击此链接时，会在控制台中显示一个空白页面，而不会出现任何错误。但是，当我直接从地址栏中点击相同的网址时，它可以工作。

我对此进行了一定程度的调试，发现问题出在直译器service.ts文件的构造函数上。如果我删除它，路由从主页可以正常工作。但我不确定如何在不删除服务依赖项的情况下解决此问题。

注册组件：

export class RegistrationComponent implements OnInit, AfterViewInit {

  transLitElementArray: ElementRef[] =[];

   @ViewChild('userDescription') userDescription:ElementRef;
   @ViewChild('displayName') displayName:ElementRef;

  constructor(private transliteratorService:Transliterate) { }

  ngOnInit() {
    
  }

  ngAfterViewInit(){

     this.transLitElementArray.push(this.userDescription);
     this.transLitElementArray.push(this.displayName);

     this.transliteratorService.initializeTransliteration(this.transLitElementArray);

  }

}

音译服务：

export class Transliterate {

  textAreaArray: ElementRef[];

  constructor() {
    google.load("elements", "1", {
      packages: "transliteration"
    });

  }

  initializeTransliteration(elementFromComponent: ElementRef[]) {


    this.textAreaArray = elementFromComponent;
    google.setOnLoadCallback(() => this.onLoad());
  }


  private onLoad() {
    const elements = [];
    this.textAreaArray.forEach((element: ElementRef) => {
      elements.push(element.nativeElement);
    });


    var options = {
      sourceLanguage: 'en',
      destinationLanguage: ['ta'],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
    };

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

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

    control.makeTransliteratable(elements, opt_options);

  }
}

我能感觉到这与我在服务的构造函数中所做的活动的异步性有关。但是，我是初学者，我无法解决这个问题。

4

1 回答 1

0

我解决了这个问题。如果有人正在寻找答案，请参阅此堆栈溢出问题的答案。感谢发布答案的人。

于 2019-06-22T20:11:49.273 回答