Chart.js non viene visualizzato in Angular2 se non esiste nella pagina principale

Question

Sembra soddisfacente ogni volta che si esegue il dump del grafico sul app.component.html principale, ma non appena lo utilizzo in un componente figlio e l'app è stata instradata, il grafico non viene visualizzato. Nella finestra di ispezione, mostra l'elemento con altezza 0 e larghezza 0. Qualcuno ha una soluzione a questo?

Ecco il mio codice per i miei 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 { } 

Ecco il mio codice per la mia 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 height="250" width="350"></canvas> 

L'elemento canvas sulla pagina HTML mostra bene. Tuttavia, una volta inserito nel mio home.component, non verrà visualizzato.

Ecco il mio 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 { } 

Ecco il mio 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 height="250" width="350"></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> 

Infine, ecco la mia 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);    

    } 

} 

Answer 1

Ok, ecco come ho risolto il problema che stavo avendo. Ho creato un nuovo componente canvas con solo l'elemento canvas e ho importato la direttiva chart sul nuovo componente. Successivamente, ho usato la classe DynamicComponentLoader per caricare dinamicamente il mio componente ogni volta che creo un'istanza del mio componente home.

Nuove 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); 
    } 
} 

Nuova 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> 

Nuove canvas.component.ts

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

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

export class CanvasComponent { } 

Spero che questo possa aiutare qualcuno su.

Answer 2

C'è stato un cambio di rottura in Angular 2.0.0-beta.3 per ElementRef https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta3-2016-02-03. Invece di usare ElementRef all'interno del costruttore, dovresti guardare ngOnInit come un gancio LifeCycle https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html