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

为什么不在脚本加载后直接调用该方法

实际上，您可以通过 window 对象定义一个全局函数并传递函数的名称（字符串）。

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);
...