Chart.js 如果主页上不存在，则不会在 Angular2 中显示

Posted 2023-03-13

【中文标题】Chart.js 如果主页上不存在，则不会在 Angular2 中显示

【英文标题】：Chart.js not showing in Angular2 if it doesn't exist on the main page

【发布时间】：2016-05-21 05:51:02

【问题描述】：

每当我将图表转储到主 app.component.html 时似乎都很好，但是一旦我在子组件中使用它并将应用程序路由到它，图表就不会显示。在检查器窗口中，它显示元素具有 0 高度和 0 宽度。有没有人可以解决这个问题？

这是我的 app.component.ts 的代码：

import Component from 'angular2/core';
import RouteConfig, ROUTER_DIRECTIVES from 'angular2/router';

import HomeComponent from './home.component';
import ProfileComponent from './profile.component';
import HoursComponent from './hours.component';
import SettingsComponent from './settings.component';
import TaskComponent from './task.component';
import ChartDirective from './chart.directive';


@Component(
    selector: 'track-me',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES,ChartDirective]    
)

@RouteConfig([
     path: '/', component: HomeComponent, name: 'Home' ,
     path: '/home', component: HomeComponent, name: 'Home' ,
     path: '/profile', component: ProfileComponent, name: 'Profile' ,
     path: '/hours', component: HoursComponent, name: 'Hours' ,
     path: '/settings', component: SettingsComponent, name: 'Settings' ,
     path: '/task', component: TaskComponent, name: 'Task' ,
])

export class AppComponent  

这是我的 app.component.html 的代码：

<ul class="nav navmenu-nav">
    <li><a [routerLink]="['/Home']">Home</a></li> 
    <li><a [routerLink]="['/Profile']">Profile</a></li> 
    <li><a [routerLink]="['/Hours']">Set Hours</a></li> 
    <li><a [routerLink]="['/Settings']">Settings</a></li>
    <li><a [routerLink]="['/Task']">Completed Task</a></li>
</ul>

<router-outlet></router-outlet>
<canvas id="myChart" chart  ></canvas>

html 页面上的 canvas 元素会显示得很好。但是，一旦我把它放在我的 home.component 中，它就不会显示了。

这是我的 home.component.ts：

import Component from 'angular2/core';
import ChartDirective from './chart.directive';
import TopicsComponent from './topics.component';

@Component(
    selector: 'home',
    templateUrl: 'app/home.component.html',
    directives: [TopicsComponent, ChartDirective]
)

export class HomeComponent  

这是我的 home.component.html：

<div class="container details-container">
  <topics></topics>
</div>

<div class="graph-container">
    <div class="row no-pad" style="position: relative;">
        <div style="margin-left:14px; z-index: 100; height: 250px;">    
            <canvas id="myChart" chart  ></canvas>
        </div>  
        <div class="vaxis-bar"></div>
    </div><!--/row-->
    <div class="row">
        <div class="col-sm-12 text-center bottom-row">
            HOURS(9)
        </div>
    </div>
</div>

最后，这是我的 chart.directive.ts：

/// <reference path="../node_modules/chart.js/chart.d.ts" />

import Directive, ElementRef, Renderer, Input from 'angular2/core';
@Directive(
    selector: '[chart]'
)
export class ChartDirective 
    constructor(el: ElementRef, renderer: Renderer) 
        //el.nativeElement.style.backgroundColor = 'yellow';
        var data = 
            labels: ["", "", "", "", "", "", "", "", ""],
            datasets: [
                
                    label: "Track Me",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(13,220,138,1)",
                    pointColor: "rgba(13,220,138,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [1, 3, 13, 7, 0, 5, 9, 2, 5]
                
            ]
        ;
        var opts = 
            pointDot: false, scaleFontColor: "#50728d", scaleShowLabels: true, responsive: false, scaleLineColor: "rgba(255,255,255,.3)"
        ;

        var ctx: any = el.nativeElement.getContext("2d");
        var lineChart = new Chart(ctx);
        ////var lineChartOptions = areaChartOptions;
        ////lineChartOptions.datasetFill = false;
        lineChart.Line(data,opts);             

    

【参考方案1】：

好的，这就是我解决问题的方法。我只使用 canvas 元素创建了一个新的 canvas 组件，并将我的图表指令导入到新组件中。之后，每当我创建我的主组件的实例时，我都会使用 DynamicComponentLoader 类来动态加载我的组件。

新的 home.component.ts：

import Component, DynamicComponentLoader, Injector from 'angular2/core';
import TopicsComponent from './topics.component';
import CanvasComponent from './canvas.component';

@Component(
    selector: 'home',
    templateUrl: 'app/home.component.html',
    directives: [TopicsComponent, CanvasComponent]
)

export class HomeComponent  
    constructor(dcl: DynamicComponentLoader, injector: Injector) 
        dcl.loadAsRoot(CanvasComponent, '#chartInsert', injector);
    

新建 home.component.html

<div class="container details-container">
  <topics></topics>
</div>

<div class="graph-container">
    <div class="row no-pad" style="position: relative;">
        <div style="margin-left:14px; z-index: 100; height: 250px;" id="chartInsert">   
        </div>  
        <div class="vaxis-bar"></div>
    </div><!--/row-->
    <div class="row">
        <div class="col-sm-12 text-center bottom-row">
            HOURS(9)
        </div>
    </div>
</div>

新建 canvas.component.ts

import Component from 'angular2/core';
import ChartDirective from './chart.directive';

@Component(
    selector: 'canvas-component',
    template: '<canvas id="myChart" chart  ></canvas>',
    directives: [ChartDirective]
)

export class CanvasComponent  

我希望这可以帮助别人。

【参考方案2】：

关于 ElementRef https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta3-2016-02-03，Angular 2.0.0-beta.3 发生了重大变化。与其在构造函​​数中使用 ElementRef，不如将 ngOnInit 视为 LifeCycle 钩子https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

【讨论】：

我在 Angular2 RC 4 上，这对我有用。谢谢！我没有在构造函数中进行任何初始化，而是将其转移到 ngOnInit 函数中。