来自主页的 routerLink 导致空白页面，而直接点击 url 工作正常

Question

我在我的 angular 项目中使用 google 音译 api。我的注册组件中有几个字段需要音译。我有一个单独的服务来加载 google 音译包。在我的主页中，我有一个 link 用于通过 routerLink 绑定进行注册的页面。当我从主页单击此 link 时，控制台中会显示一个空白页面，没有任何错误。但是，当我直接从地址栏点击相同的 url 时，它起作用了。

我对此进行了一定程度的调试，发现问题出在音译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);

  }
}

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

Answer 1

我解决了这个问题。如果有人正在寻找答案，请参考这个的答案。感谢发布答案的人。