javascript - Angular 6 - 将方法设置为元素的 `data-*` 属性

Question

我的 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( documentation ) 仅将 String 作为第二个参数。

我该如何重写它，以便我可以将 callBackMethod 设置为我创建的 script 元素的 data-callback 属性动态？

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(How to generate UUID in angular 6 ) 将其保存在一个变量中并执行:

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