Question

我在我的角度项目中使用了Google音译API。我的注册组件中有几个字段需要翻译。我有一个单独的服务来加载Google音译包。在我的主页中，我有一个通过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);

  }
}

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

Answer 1

我解决了这个问题。如果有人在寻找答案，请参考此stack overflow question中的答案。感谢发布答案的那个人。

从首页的routerLink导致空白页，而直接点击url则效果很好

1 个答案: