Question

我有此代码：

<script>
 (function () {
    alert('Hi');
    var element = document.createElement('script');
    element.type = 'text/javascript';
    element.async = true;
    element.src = '//... .js';
    var script = document.getElementsByTagName('script')[0];
    script.parentNode.insertBefore(element, script);
 })();
</script>

<noscript>
   <img src="//..." width="1" height="1" style="display: none;" />
</noscript>

我想将此代码放在有角度的组件内部，因此我可以从其他任何组件调用此组件并使脚本执行。

我该怎么做？

我阅读了很多解决方法，但是我没有找到正确的方法。

Answer 1

您可以使用以下代码在文档的script标签中添加新的DOM元素head：

let node = document.createElement('script');
node.src = ...;
node.type = 'text/javascript';
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);

请注意，仅执行一次此代码。（例如，在单实例服务内部）。同时也是检查document是否存在的最佳实践。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ScriptService {
  constructor() {
    // call once, because of 'providedIn: root' => singleton instance
    if (document) {
      // browser platform
      let node = document.createElement('script');
      node.src = ...;
      node.type = 'text/javascript';
      node.charset = 'utf-8';
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }
}

然后，在组件内部注入单例服务：

export class HelloComponent {
  @Input() name: string;

  constructor(
    private scriptService: ScriptService
  ) { }
}

首次实例化组件时，ScriptService也将实例化，但仅实例化一次，并且您的script元素将被添加到document中。

如何使用脚本和Noscript作为组件

1 个答案: