在 Angular 中动态添加脚本到 <head>

Question

我检查了一些示例，演示如何在 Angular 中动态添加带有 URL 的脚本

但我想添加这种东西<head>

<script>
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', '<FB_PIXEL_ID>');
  fbq('track', "PageView");
</script>
  
  

或者

  <noscript>something</noscript>
      

或两者。

有什么想法、例子吗？

Answer 1

您可以创建一个函数，从文档中获取（第一个）head 标记，并innerHTML在 head 标记的第一个子标记之前添加创建的脚本标记（使用您在 中指定的代码）：

export function addScriptsToHead() {
  const head = document.getElementsByTagName('head')[0];

   
  const script = document.createElement('script');
  script.innerHTML = 'your code';

  head.insertBefore(script, head.firstChild);
}