Question

我要显示图形。

在chart.component.ts文件中，我编写了用于绘制图形的数据：

import { Component, OnInit } from '@angular/core';
import { PlotlyModule } from 'angular-plotly.js';
import * as PlotlyJS from 'plotly.js/dist/plotly.js';


PlotlyModule.plotlyjs = PlotlyJS;



@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  styleUrls: ['./element.component.scss']
})
export class ElementComponent implements OnInit {

      public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };

  constructor() { }

  ngOnInit(): void {
  }

} html看起来像这样：

<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>

然后我要在另一个组件中呈现此图。我创建了一个dashboard.component.ts

<app-element></app-element>

然后当我尝试服务时

发生错误：

如果“ app-heatmap”是Angular组件，则请确认它是其中的一部分该模块的 2.如果“ app-element”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas” 禁止显示此消息。
2 <app-element></app-element>

好像我忘了一步？

Answer 1

将ElementComponent添加到默认模块（通常为declarations）中的app.module.ts数组中

@NgModule({
  declarations: [
    ElementComponent
    ...
  ]
...

Answer 2

两种可能性在这里

1。这两个元素都在同一模块中

@NgModule({
    ...
    declarations: [AppElementComponent, ParentComopnent]
    ...
})

2。两者都在不同的模块中

AppComponentModule

@NgModule({
    ...
    declarations: [AppElementComponent],
    exports: [AppElementComponent]
    ...
})

ParentComponentModule

@NgModule({
    ...
    declarations: [ParentComponent],
    imports: [AppComponentModule],
    ...
})

“ app-element”不是角度的已知元素

2 个答案: