HTML页面单独显示很好，但在角度项目中不显示答案

【问题标题】：HTML Page displays fine individually but not in angular projectHTML页面单独显示很好，但在角度项目中不显示
【发布时间】：2018-08-01 16:20:35
【问题描述】：

我的问题是，当我将此代码粘贴到我的 Angular 项目中（在 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 和 withing stock.component.html，我放置了这段代码。没有图表显示。但是，如果我在正文中添加文本，它会显示得很好。

我在这里做错了什么？

【问题讨论】：

标签： html angular canvasjs

【解决方案1】：

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

为了安全起见，Angular 会去掉所有的<script> 标签。所以这就是它不起作用的原因。

更多信息请看这篇文章：How to load script file from component html?

【讨论】：