如果主页上不存在 Chart.js，则不会在 Angular2 中显示 [英] Chart.js not showing in Angular2 if it doesn't exist on the main page

查看：21
本文介绍了如果主页上不存在 Chart.js，则不会在 Angular2 中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

从'angular2/core'导入{Component}；从 'angular2/router' 导入 {RouteConfig, ROUTER_DIRECTIVES}；从 './home.component' 导入 {HomeComponent}；从 './profile.component' 导入 {ProfileComponent}；从'./hours.component'导入{HoursComponent}；从 './settings.component' 导入 {SettingsComponent}；从'./task.component'导入{TaskComponent}；从'./chart.directive'导入{ChartDirective}；@零件({选择器:'跟踪我'，templateUrl: 'app/app.component.html',指令:[ROUTER_DIRECTIVES,ChartDirective]})@RouteConfig([{ path: '/', 组件: HomeComponent, name: 'Home' },{ path: '/home', 组件: HomeComponent, name: 'Home' },{ 路径:'/profile'，组件:ProfileComponent，名称:'Profile' }，{ 路径:'/小时'，组件:小时组件，名称:'小时'}，{ path: '/settings', 组件: SettingsComponent, name: 'Settings' },{ path: '/task', 组件: TaskComponent, 名称: 'Task' },])导出类 AppComponent { }

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

    <li><a [routerLink]="['/Home']">Home</a></li><li><a [routerLink]="['/Profile']">Profile</a></li><li><a [routerLink]="['/Hours']">设置营业时间</a></li><li><a [routerLink]="['/Settings']">设置</a></li><li><a [routerLink]="['/Task']">已完成的任务</a></li>
<路由器插座></路由器插座><canvas id="myChart" 图表高度="250" width="350"></canvas>

html 页面上的 canvas 元素将正常显示.但是，一旦我将其放入 home.component 中，它就不会显示.

这是我的 home.component.ts:

从'angular2/core'导入{Component}；从'./chart.directive'导入{ChartDirective}；从'./topics.component'导入{TopicsComponent}；@零件({选择器:'家'，templateUrl: 'app/home.component.html',指令:[TopicsComponent, ChartDirective]})导出类 HomeComponent { }

这是我的 home.component.html:

<话题></话题>
<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" 图表高度="250" width="350"></canvas>

<div class="vaxis-bar"></div></div><!--/row--><div class="row"><div class="col-sm-12 text-center bottom-row">小时(9)

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

///<参考路径="../node_modules/chart.js/chart.d.ts"/>从angular2/core"导入 {Directive, ElementRef, Renderer, Input}；@指示({选择器:'[图表]'})导出类 ChartDirective {构造函数(el:ElementRef，渲染器:渲染器){//el.nativeElement.style.backgroundColor = '黄色';变量数据 = {标签: [""， ""， ""， ""， ""， ""， ""， ""， ""]，数据集:[{标签:跟踪我"，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)",数据:[1, 3, 13, 7, 0, 5, 9, 2, 5]}]};变量选择 = {pointDot: false, scaleFontColor: "#50728d", scaleShowLabels: true, 响应: false, scaleLineColor: "rgba(255,255,255,.3)"};var ctx: any = el.nativeElement.getContext("2d");var lineChart = 新图表(ctx)；////var lineChartOptions = areaChartOptions;////lineChartOptions.datasetFill = false;lineChart.Line(data,opts);}}

解决方案

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

新的 home.component.ts:

import {Component, DynamicComponentLoader, Injector} from 'angular2/core';从'./topics.component'导入{TopicsComponent}；从'./canvas.component'导入{CanvasComponent}；@零件({选择器:'家'，templateUrl: 'app/home.component.html',指令:[TopicsComponent, CanvasComponent]})导出类 HomeComponent {构造函数(dcl:DynamicComponentLoader，注入器:注入器){dcl.loadAsRoot(CanvasComponent, '#chartInsert', 注入器);}}

新建 home.component.html

<话题></话题>
<div class="graph-container"><div class="row no-pad" style="position: relative;"><div style="margin-left:14px; z-index: 100; height: 250px;"id="图表插入">

<div class="vaxis-bar"></div></div><!--/row--><div class="row"><div class="col-sm-12 text-center bottom-row">小时(9)

新建 canvas.component.ts

从'angular2/core'导入{Component}；从'./chart.directive'导入{ChartDirective}；@零件({选择器:'画布组件'，模板:'<canvas id="myChart" 图表高度="250" width="350"></canvas>',指令:[ChartDirective]})导出类 CanvasComponent { }

我希望这可以帮助别人.

It seems fine whenever I dump the chart to the main app.component.html, but as soon as I use it in a child component and have the app routed to it, the chart doesn't show up. In the inspector window, it shows the element as having 0 height and 0 width. Does anyone have a solution to this?

Here is my code for my 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 { }

Here is my code for my 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>

The canvas element on the html page will show fine. However, once I put it inside of my home.component, it wont show.

Here's my 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 { }

Here's my 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>

Finally, here's my 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);             

    }

}

解决方案

Ok, so here's how I solved the issue I was having. I created a new canvas component with just the canvas element and imported my chart directive to the new component. After that, I used the DynamicComponentLoader class to dynamically load my component whenever I create an instance of my home component.

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

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>

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

I hope this can help someone out.

这篇关于如果主页上不存在 Chart.js，则不会在 Angular2 中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆