Chart.jsがAngular2で表示されないメインページに存在しない場合

Question

チャートをメインの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 height="250" width="350"></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 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> 

は最後に、ここに私の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

さて、私が持っていた問題を解決する方法はここにあります。キャンバス要素だけで新しいキャンバスコンポーネントを作成し、そのチャートコンポーネントを新しいコンポーネントにインポートしました。その後、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 height="250" width="350"></canvas>', 
    directives: [ChartDirective] 
}) 

export class CanvasComponent { } 

でる。

Answer 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