Question

我的问题是，当我将此代码粘贴到我的角度项目中（在component.html部分中）时，它没有出现。

但是，它可以作为单独的html文档正常工作。

我有以下HTML代码（摘自示例）：

    <!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
    window.onload = function () {

      var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];   //dataPoints. 

      var chart = new CanvasJS.Chart("chartContainer",{
        title :{
            text: "Stocks"
        },
        axisX: {                        
            title: "Axis X Title"
        },
        axisY: {                        
            title: "Units"
        },
        data: [{
            type: "line",
            dataPoints : dps
        }]
      });

      chart.render();
      var xVal = dps.length + 1;
      var yVal = 15;    
      var updateInterval = 1000;

      var updateChart = function () {


        yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
        dps.push({x: xVal,y: yVal});

        xVal++;
        if (dps.length >  10 )
        {
            dps.shift();                
        }

        chart.render();     

    // update chart after specified time. 

};

setInterval(function(){updateChart()}, updateInterval); 
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>
</html>

我创建了一个组件stocks，并在stocks.component.html中放置了此代码。没有显示图形。但是，如果我在正文中添加文本，它将显示正常。

我在这里做什么错了？

Answer 1

与组件关联的HTML只是HTML片段，而不是HTML页面。它不应包含<html>或<head>标签。这是因为组件中定义的片段已插入到index.html页面中。

出于安全目的，Angular会删除任何<script>标签。这就是为什么它不起作用的原因。

有关更多信息，请参见此帖子：How to load script file from component html?

HTML页面可以单独正常显示，但不能在角度项目中显示

1 个答案: