Question

我有这个脚本标签：

<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

Answer 1

尝试一下：

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

Answer 2

目前，我将使用技巧来显示3D图像，将script标签放在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 ===否，开发级警告已关闭，性能优化已启用

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

如何在有角度的组件中嵌入脚本标签？

2 个答案: