1

angularプロジェクトでgoogle音訳APIを使用しています。私の登録コンポーネントには、文字変換が必要なフィールドがいくつかあります。Google 音訳パッケージをロードするための別のサービスがあります。私のホームページには、routerLink バインディングによる登録ページへのリンクがあります。ホームページからこのリンクをクリックすると、コンソールにエラーなしで空白のページが表示されます。ただし、アドレスバーから同じ 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);

  }
}

サービスのコンストラクター内で行っているアクティビティの非同期性と関係があると感じています。しかし、私は初心者であり、これを解決できません。

4

1 に答える 1