Chart.js không hiển thị trong Angular2 nếu nó không tồn tại trên trang chính

Question

Có vẻ như tốt khi tôi đổ biểu đồ vào app.component.html chính, nhưng ngay sau khi tôi sử dụng nó trong một thành phần con và có ứng dụng được chuyển đến nó, biểu đồ không hiển thị. Trong cửa sổ thanh tra, nó hiển thị phần tử có chiều cao 0 và chiều rộng 0. Có ai có giải pháp cho điều này không?

Đây là mã của tôi cho app.component.ts tôi:

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 { } 

Đây là mã của tôi cho app.component.html tôi:

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

Yếu tố canvas trên trang html sẽ hiển thị tốt. Tuy nhiên, một khi tôi đặt nó bên trong home.component của tôi, nó sẽ không hiển thị.

Dưới đây là home.component.ts tôi:

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 { } 

Dưới đây là home.component.html tôi:

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

Cuối cùng, đây là chart.directive.ts tôi:

/// <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, vì vậy, đây là cách tôi giải quyết vấn đề tôi đang gặp phải. Tôi đã tạo một thành phần canvas mới chỉ với phần tử canvas và nhập chỉ thị biểu đồ của tôi vào thành phần mới. Sau đó, tôi đã sử dụng lớp DynamicComponentLoader để tự động tải thành phần của mình bất cứ khi nào tôi tạo một cá thể của thành phần home của mình.

home.component.ts mới:

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

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

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 { } 

Tôi hy vọng điều này có thể giúp một người nào đó ngoài.

Answer 2

Có thay đổi đột ngột trong Angular 2.0.0-beta.3 liên quan đến ElementRef https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta3-2016-02-03. Thay vì sử dụng ElementRef bên trong hàm tạo, bạn nên xem ngOnInit như một móc LifeCycle https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html