如何在角度组件中嵌入脚本标签？答案

【问题标题】：How to embed a script tag in an angular component?如何在角度组件中嵌入脚本标签？
【发布时间】：2019-02-19 08:35:15
【问题描述】：

我有这个脚本标签：

<script src='//vizor.io/static/scripts/vizor-360-embed.js' 
        data-vizorurl='//vizor.io/embed/bumblucian/casuta-favorita'></script>

这将在我的网站上放置一个 3D 图像（参见示例 3D images）

我想创建一个可以在我网站的多个位置使用的组件。如果我将脚本标记按原样放在 html 文件上，则无法正常工作。

我尝试了这个问题Adding script tags in Angular component template 的答案，但我不知道如何将data-vizorurl 属性添加到脚本标签。

export class PerspectiveImageComponent implements OnInit {

  constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document) {
  }

  public ngOnInit() {

      let s = this._renderer2.createElement('script');
      s.src='//vizor.io/static/scripts/vizor-360-embed.js';

      // I tried like this, but is not compiling. 
      s.data-vizorurl='//vizor.io/embed/bumblucian/casuta-favorita'; 

      this._renderer2.appendChild(this._document.body, s);
  }
}

你能帮我解决一下吗？

编辑：如果我使用 s.dataset.vizorurl 正在工作。我在文档上有脚本标签，但我还有另一个错误：

vizor-360-embed.js:28 Uncaught TypeError: Cannot read property 'previousElementSibling' of null
    at findSelfInDocument (vizor-360-embed.js:28)
    at vizor-360-embed.js:34
    at vizor-360-embed.js:98

【问题讨论】：

标签： angular angular7

【解决方案1】：

试试这个：

...
s.dataset.vizorurl='//vizor.io/embed/bumblucian/casuta-favorita';
...

【讨论】：

@LucianBumb 在s.dataset 上设置属性，而不是s.data
是的，数据集正在放置这个脚本标签。我收到另一个错误Cannot read property 'previousElementSibling' of null at findSelfInDocument (vizor-360-embed.js:28) 我认为由于角度问题而无法正常工作

【解决方案2】：

目前我使用一个技巧来显示这个 3D 图像，我将脚本标签放在 Index.html 上的一个 div 中，并使用这个函数切换 div 的可见性：

toggleElement(){
  var el=  document.getElementById("3dImage");

    if (el.style.display === "none") {
      el.style.display = "block";
    } else {
      el.style.display = "none";
    }
  }

我仍然收到一些衣服：

使用 appParams 运行应用程序“PlayerRenderer”： {"initialProps":{"file":{"scenes":[{"type":"scene","uid":"HnWHDuk8CCCX","children":[],"props":{"title":" IMG 0094 IMG 0175 27 imag","originalTitle":"IMG 0094 IMG 0175 27 imag","background":"/data/image/09a7c800ceea1d084aa480b0ab34902011ad7e20.jpg","thumbnail":"/data/image/09a7c800ceea1d084aa480b0ab34902011ad7e20-thumbnail.jpg"}}]}},"rootTag":1}。 DEV === false，开发级警告关闭，性能优化开启

如果有人能找到将vizor.io 脚本标签嵌入到角度组件中的解决方案，我仍然很感兴趣。

【讨论】：