无法让 ng2-charts 在 Angular 4 中使用共享组件

Question

angular 4.0.0
angular-cli 1.2.1
ng2-图表 1.6.0

我可以让 ng2-charts 以正常方式工作，但我无法让它在 "shared" 个组件中工作。

我有一个由 app.module 导入的共享 components.module。如果我尝试在共享组件中的一个组件中使用 ng-charts，我会得到

"Can't bind to 'data' since it isn't a known property of 'canvas'"

错误等。

这是我最基本的设置：

app.module

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { RootLevelComponent } from './components/root-level-component.component;
import { SharedComponents } from './modules/shared/shared-components/shared-components.module';

declarations: [
  RootLevelComponent
],
imports: [
  SharedComponents
  ChartsModule
],

共享-components.module

import { SharedComponent } from '../components/shared-component.component';

declarations: [
  SharedComponent
],
exports: [
  SharedComponent
]

只要它在我的根级组件模板中，它就可以正常工作：

根级-component.html

<canvas baseChart
  [data]="myData"
  [labels]="myLabels"
  [chartType]="'pie'"
  (chartHover)="chartHovered($event)"
  (chartClick)="chartClicked($event)"></canvas>

相同的设置在我的共享组件模板中不起作用：

共享-component.html

<canvas baseChart
  [data]="myData"
  [labels]="myLabels"
  [chartType]="'pie'"
  (chartHover)="chartHovered($event)"
  (chartClick)="chartClicked($event)"></canvas>

当我尝试在我的共享组件中使用它时出现 "Can't bind to 'data' since it isn't a known property of 'canvas'" 错误。

Answer 1

在您的 shared-components.module 导入中添加 ChartsModule：

imports: [
  ChartsModule
],

无法让 ng2-charts 在 Angular 4 中使用共享组件

Can't get ng2-charts to work in Angular 4 with shared components

ng2-charts

angular