Javascript 角度2-“；无法读取属性'；getContext'；“无效”的定义；使用HTML画布时出错

我正在尝试显示一个使用HTML5画布制作的甜甜圈图表。我得到一个错误，说

无法读取null的属性“getContext”

，我知道这是因为我的JS代码是在加载HTML之前加载的

如何用Angular2解决这个问题

工作代码（获取错误）：

Html格式的工作圆环图：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量颜色=['绿色'，'橙色']；
var值=[47,53]；
变量标签=[“已完成”，“待定]；
dmbChart（125100,25，值、颜色、标签，0）；
功能dmbChart（cx、cy、半径、弧宽、值、颜色、标签、选定值）{
var-tot=0；
var accum=0；
var-PI=Math.PI；
var PI2=PI*2；
var偏移量=-PI/2；
ctx.线宽=弧宽；
对于（var i=0；i尝试按如下方式声明画布：

 var ctx: CanvasRenderingContext2D = this.childComponent.nativeElement.getContext("2d");

您的组件将是：

@Component({
    selector: 'canvas-component',
    template: `<canvas #childComponent></canvas>`,
})
export class ParentComponent{
    ...
    @ViewChild childComponent: ElementRef; 
    ...
}

@组件({
选择器：“画布组件”，
模板：``，
})
导出类ParentComponent{
...
@ViewChild-childComponent:ElementRef；
...
}

详情如下：
尝试按如下方式声明画布：

 var ctx: CanvasRenderingContext2D = this.childComponent.nativeElement.getContext("2d");

您的组件将是：

@Component({
    selector: 'canvas-component',
    template: `<canvas #childComponent></canvas>`,
})
export class ParentComponent{
    ...
    @ViewChild childComponent: ElementRef; 
    ...
}

@组件({
选择器：“画布组件”，
模板：``，
})
导出类ParentComponent{
...
@ViewChild-childComponent:ElementRef；
...
}

详情如下：
在我将代码放入
ngAfterViewInit（）{}

import {Component} from '@angular/core';
@Component({
    selector:'test-component',
    styleUrls: ['./test.component.css'],
    templateUrl: './test.component.html'

})
export class TestComponent{


  ngAfterViewInit() {
    var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var colors=['green','orange'];
var values=[47,53];
var labels=['Completed','Pending'];

dmbChart(125,125,100,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){
    var tot=0;
    var accum=0;
    var PI=Math.PI;
    var PI2=PI*2;
    var offset=-PI/2;
    ctx.lineWidth=arcwidth;
    for(var i=0;i<values.length;i++){tot+=values[i];}
    for(var i=0;i<values.length;i++){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,
            offset+PI2*(accum/tot),
            offset+PI2*((accum+values[i])/tot)
        );
        ctx.strokeStyle=colors[i];
        ctx.stroke();
        accum+=values[i];
    }
    var innerRadius=79;
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,0,PI2);
    ctx.fillStyle=colors[selectedValue];
    ctx.fill();
    ctx.textAlign='center';
    ctx.textBaseline='bottom';
    ctx.fillStyle='#FFF';
    ctx.font=(60)+'px sans-serif';
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.7);
    ctx.font=(20)+'px sans-serif';
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);
}
      }

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'测试组件'，
样式URL:['./test.component.css']，
templateUrl:“./test.component.html”
})
导出类TestComponent{
ngAfterViewInit（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量颜色=['绿色'，'橙色']；
var值=[47,53]；
变量标签=[“已完成”，“待定]；
dmbChart（125100,25，值、颜色、标签，0）；
功能dmbChart（cx、cy、半径、弧宽、值、颜色、标签、选定值）{
var-tot=0；
var accum=0；
var-PI=Math.PI；
var PI2=PI*2；
var偏移量=-PI/2；
ctx.线宽=弧宽；
对于（var i=0；i在我将代码放入
ngAfterViewInit（）{}

import {Component} from '@angular/core';
@Component({
    selector:'test-component',
    styleUrls: ['./test.component.css'],
    templateUrl: './test.component.html'

})
export class TestComponent{


  ngAfterViewInit() {
    var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var colors=['green','orange'];
var values=[47,53];
var labels=['Completed','Pending'];

dmbChart(125,125,100,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){
    var tot=0;
    var accum=0;
    var PI=Math.PI;
    var PI2=PI*2;
    var offset=-PI/2;
    ctx.lineWidth=arcwidth;
    for(var i=0;i<values.length;i++){tot+=values[i];}
    for(var i=0;i<values.length;i++){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,
            offset+PI2*(accum/tot),
            offset+PI2*((accum+values[i])/tot)
        );
        ctx.strokeStyle=colors[i];
        ctx.stroke();
        accum+=values[i];
    }
    var innerRadius=79;
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,0,PI2);
    ctx.fillStyle=colors[selectedValue];
    ctx.fill();
    ctx.textAlign='center';
    ctx.textBaseline='bottom';
    ctx.fillStyle='#FFF';
    ctx.font=(60)+'px sans-serif';
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.7);
    ctx.font=(20)+'px sans-serif';
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);
}
      }

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'测试组件'，
样式URL:['./test.component.css']，
templateUrl:“./test.component.html”
})
导出类TestComponent{
ngAfterViewInit（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量颜色=['绿色'，'橙色']；
var值=[47,53]；
变量标签=[“已完成”，“待定]；
dmbChart（125100,25，值、颜色、标签，0）；
功能dmbChart（cx、cy、半径、弧宽、值、颜色、标签、选定值）{
var-tot=0；
var accum=0；
var-PI=Math.PI；
var PI2=PI*2；
var偏移量=-PI/2；
ctx.线宽=弧宽；
对于（var i=0；iIt，听起来你已经知道了解决方案。但不知道如何在Angular 2中实现。我不是AngularJS方面的专家，但它在AngularJS中的工作方式不应该相同吗？毕竟，你的JavaScript就是：JavaScript。所有解决方案都应该相同，即使使用AngularJS，例如，在
addEventListener中包装你的代码(“DOMContentLoaded”，function（）{
..
}
，或者将脚本放在
的底部。此代码的哪一部分来自angular？：）顺便说一句，我成功地使用了reactI。我正在尝试将其作为AngularJS中的一个组件来实现。所以我需要它是动态的。听起来你已经知道解决方案了。但是不知道如何在AngularJS中实现。我不是AngularJS方面的专家，但它不应该在AngularJS中以同样的方式工作吗？毕竟，你的JavaScript就是：JavaScript.all solutionns应该同样工作，即使是AngularJS，例如，将代码包装在
addEventListener（“DOMContentLoaded”，function（）{
..
}）
，或者将脚本放在
的底部。此代码的哪一部分来自angular？：）顺便说一句，我使用reacts成功了，我正在尝试将它作为Angular 2中的一个组件来实现。所以我需要它是动态的。