这是我的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',{ 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,0.2)",strokeColor: "rgba(13,138,1)",pointColor: "rgba(13,pointStrokeColor: "#fff",pointHighlightFill: "#fff",pointHighlightStroke: "rgba(220,data: [1,3,13,7,5,9,2,5]
                }
            ]
        };
        var opts = {
            pointDot: false,scaleFontColor: "#50728d",scaleShowLabels: true,responsive: false,scaleLineColor: "rgba(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);             

    }

}