Angular 6 - установка метода в качестве атрибута `data- *` для элемента

Question

My component.ts выглядит следующим образом:

import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { environment } from '../../../environments/environment';


@Component({
  selector: 'app-requester',
  template: '<div id="btn-dlg-container"></div></div>',
})
export class RequesterComponent implements OnInit, AfterViewInit {
  private externalJSHost = 'URI pointing to external JS';

  constructor(
    @Inject(DOCUMENT) private document, private elementRef: ElementRef
  ) { }

  ngOnInit() {
  }

  ngAfterViewInit () {
    const s2 = document.createElement('script');
    s2.type = 'text/javascript';
    s2.src = this.externalJSHost; // external script
    s2.id = 'dlshare';
    s2.setAttribute('data-callback', this.callBackMethod); // This is where the problem is
    document.body.appendChild(s2);
 }

  callBackMethod() {
    console.log('SUCCESS !!!');
  }

}

Элемент script, который я создал, нуждается в атрибуте data-callback, который должен быть функцией.Эта функция выполняется после выполнения скрипта.

По-видимому, Element.setAttribute ( документация ) принимает только String в качестве второго аргумента.

Как мне переписать это, чтобы я мог установить callBackMethod в качестве атрибута data-callback для элемента script, который я создал динамически?

Answer 1

Почему бы не вызвать метод напрямую после загрузки скрипта

На самом деле, вы можете определить глобальную функцию через объект окна и передать имя (строку) функции.

ngAfterViewInit () {
  window.my_global_callback = (data) => {
      console.log(data);
      this.callBackMethod();
  };
  const s2 = document.createElement('script');
  s2.type = 'text/javascript';
  s2.src = this.externalJSHost; // external script
  s2.id = 'dlshare';
  s2.setAttribute('data-callback', 'my_global_callback'); 
  document.body.appendChild(s2);
 }

Кроме того, если вы хотите сделать имя глобального обратного вызова динамическим (вы можете захотеть, если у вас есть несколько экземпляров компонента, и вы хотите, чтобы у каждого был свой собственный обратный вызов), вы можете сгенерировать уникальныйid ( Как создать UUID в угловых 6 ) сохранить его в переменной и сделать:

...
window[uniqueGlobalCallbackVarName] = (data) => {
      console.log(data);
      this.callBackMethod();
};
...
s2.setAttribute('data-callback', uniqueGlobalCallbackVarName);
...