在Angular 6 component.html中使用脚本标签

时间:2018-10-11 19:23:09

标签: javascript html angular typescript angular-components

我知道Angular会删除component.html文件中的脚本标签,但是在我检出的所有不同论坛中,我都没有找到一个能够成功解决我的问题的论坛。 我正在尝试将此代码放入我的ontology.component.html文件中

<script>
  var widget_tree = $("#widget_tree").NCBOTree({
     apikey: "<my-api-key>",
     ontology: "ENVO"
  });
</script>

我的index.html已经有了必要的脚本

<link rel="stylesheet" type="text/css" href="../src/widgets/jquery.ncbo.tree.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/widgets/jquery.ncbo.tree-2.0.2.js"></script>

1 个答案:

答案 0 :(得分:1)

如果您正在使用angular6,则可以将其放置在angular.json文件的script []部分中,或者将angular 4/5文件名设置为.angular-cli

"scripts": [
    "path/to/scripts/file1.js",
    "path/to/scripts/file2.js"
]

您可能无法使用下面的代码,因为当时尚未在DOM中创建"#widget_tree"节点,只需尝试将这些代码添加到某些setTimeout()

<script>
  var widget_tree = $("#widget_tree").NCBOTree({
     apikey: "<my-api-key>",
     ontology: "ENVO"
  });
</script>

喜欢

    <script>
    function injectAPIKey() {
        setTimeout(function() {
          var widget_tree = $("#widget_tree").NCBOTree({
             apikey: "<my-api-key>",
             ontology: "ENVO"
          });
        }, 10000);
    }

injectAPIKey();

</script>