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设置为动态创建的data-callback元素的script属性？

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