如何在 Angular 8 中添加冰沙图表答案

【问题标题】：How to add smoothie chart in Angular 8如何在 Angular 8 中添加冰沙图表
【发布时间】：2020-04-29 05:48:04
【问题描述】：

我是 Angular 8 的初学者，我在我的 Angular 8 中添加冰沙图表，谷歌冰沙图表中没有添加到 Angular 8 的教程帮助我解决这个问题或给我示例

npm install smoothie 添加了我的 angular 8 项目
从“冰沙”导入 {SmoothieChart}；添加到 app.component.ts

代码：

import {SmoothieChart} from "smoothie";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'dashboard';
  constructor(){}
    ngOnInit()
    {

      var smoothie = new SmoothieChart();

    }
}

App.component.html

<div>
  <canvas id="mycanvas" width="800" height="200"></canvas>
</div>

在 Javascript 冰沙中 .streamTo(document.getElementById("chart"), 500); 在 Angular 8 中如何添加上述代码

【问题讨论】：

参考这个问题。 stackoverflow.com/questions/48226868/… 对于生命周期，请参阅此。 angular.io/guide/lifecycle-hooks

标签： javascript angular smoothie.js

【解决方案1】：

首先需要让Angular初始化DOM，所以不能在ngOnInit中做（因为元素还没有插入到DOM中），需要实现for example AfterViewInit and the related method ngAfterViewInit.

然后，您可以使用 document.getElementById 但这不是在 Angular 中实现它的最佳方式，您应该使用 use @ViewChild 来检索相关元素。

【讨论】：