其他模块的图表

Question

我想在我的程序中制作一个图形，当我把这些代码放在 "app.module"、"app.component.ts "和 "app.component.html "中时，它能正常工作，但当我在另一个模块和组件中使用时，它不能工作并返回错误，当我把它们取出来时，组件能正常工作。

模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SalesComponent } from './sales.component';
import { GenericModule } from '../generic.module';
import { ChartModule } from 'primeng/chart';

@NgModule({
  declarations: [SalesComponent],
  imports: [
    CommonModule,
    GenericModule,
    ChartModule
  ]
})
export class SalesModule { }

超文本标记语言

<p>sales works!</p>
<p-chart type="pie" [data]="data"></p-chart>

.TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sales',
  templateUrl: './sales.component.html',
  styleUrls: ['./sales.component.scss']
})
export class SalesComponent implements OnInit {

  data = {
    labels: ['A','B','C'],
    datasets: [{
        data: [300, 50, 100],
        backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
        hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ]
    }]    
  };

  constructor() { }

  ngOnInit(): void {

  }

}

错误。

src/app/components/sales/sales.component.html:2:1 - error NG8001: 'p-chart' is not a known element:
1. If 'p-chart' is an Angular component, then verify that it is part of this module.
2. If 'p-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <p-chart type="pie" [data]="data"></p-chart>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/sales/sales.component.ts:5:16
    5   templateUrl: './sales.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SalesComponent.
src/app/components/sales/sales.component.html:2:21 - error NG8002: Can't bind to 'data' since it isn't a known property of 'p-chart'.
1. If 'p-chart' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'p-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2 <p-chart type="pie" [data]="data"></p-chart>
                      ~~~~~~~~~~~~~

  src/app/components/sales/sales.component.ts:5:16
    5   templateUrl: './sales.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SalesComponent.

Answer 1

你需要添加 曲线图 在 宣言 : [ ] 在 app.module.ts），以便您可以在其他组件中访问它。 这样你就可以在其他组件中访问它。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';    
import { SalesComponent } from './sales.component';
import { GenericModule } from '../generic.module';
import { ChartModule } from 'primeng/chart';
import { PChartComponent} from './pchart.component';


@NgModule({
  declarations: [SalesComponent, PChartComponent],
  imports: [
    CommonModule,
    GenericModule,
    ChartModule
  ]
})
export class SalesModule { }