Question

我想创建一个与图表相关的模块并将其写在其他地方。

模块声明的源代码如下。

chart.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from 'ng2-charts'

import { CLineChartComponent } from './cline-chart/cline-chart.component';
import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';

@NgModule({
  imports: [
    CommonModule,
    ChartsModule
  ],
  declarations: [
    CLineChartComponent,
    DoughnutChartComponent    
  ],
  exports: [
    CLineChartComponent,
    DoughnutChartComponent
  ]
})
export class CustomChartModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CustomChartModule,
      providers: []
    }
  }
}

我试图仅使用另一个模块用于Root函数加载它。

使用forRoot函数加载模块的来源是：

dashboard.module.ts

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


import { CustomChartModule } from '@Library/chart.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CustomChartModule.forRoot()
  ],
  declarations: [
  ],
  exports: [
  ]
})
export class DashboardRootModule { }

但是，当我像这样使用它时，会出现错误。

错误：模板解析错误：“ cline-chart”不是已知元素：

尝试从与Dashboard.root.modules相同目录中的Component使用CLineChartComponent时出现错误。

为什么会出现此错误？

ps。我附加了clinechart.component.ts源。

源文件太长，因此我删除了与Option相关的部分。

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


@Component({
  selector: 'cline-chart',
  templateUrl: './cline-chart.component.html',
  styleUrls: ['./cline-chart.component.css'],
})
export class CLineChartComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  showFlag(flag:boolean){
    this.isLoad = flag;
  }

  setCLineChartData(dataSet:Array<any>,legendName:string,titleName:string){
  //this funciton is Set Data
  }

  public width: number = 230;
  public heigth: number = 100;

  public lineChartOptions: any = {
  //this Object is Chart Option
  };
  public lineChartColors: Array<any> = [
  //this Array is Defined Line color
  ];
  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }
}

app.module.ts

import { DashboardModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
  //Declare
  ],
  imports: [
    DashboardModule,
    //Import another
  ],
  providers: [
    //Porvider Anoter
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

dashboard.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';

import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardRootComponent } from './dashboard-root/dashboard-root.component';
import { BapIframeModule } from './../shared/bap-iframe/bap-iframe.module';
import { DashboardRootModule } from './dashboard-root/dashboard-root.module'

@NgModule({
  imports: [
    DashboardRootModule,
    CommonModule,
    FormsModule,
    DashboardRoutingModule,
    CoreModule.forRoot(),    
    BapIframeModule.forRoot()
  ],
  declarations: [
    DashboardComponent,
    DashboardRootComponent
  ],
  exports: [
    DashboardComponent,
    DashboardRootComponent
  ]
})
export class DashboardModule { }

dashboard.root.module.ts

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

import { GridPanelComponent } from './grid-panel.component/grid-panel.component'
import { GridScrollComponent } from './grid-scroll.component/grid-scroll.component'

import { CustomChartModule } from '@Libarary/chart.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CustomChartModule.forRoot(),
  ],
  declarations: [
    GridPanelComponent,
    GridScrollComponent
  ],
  exports: [
    GridPanelComponent,
    GridScrollComponent
  ]
})
export class DashboardRootModule { }

Answer 1

即使 CLineChartComponent 位于 CustomChartModule 内，也需要将组件导入模块中要使用的位置。所以在DashboardModule.ts

NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CustomChartModule.forRoot()
  ],
  declarations: [
     CLineChartComponent
  ],
  exports: [
  ]
})

Answer 2

您在哪里尝试使用图表组件？如果将其从DashboardModule添加到组件，则应该从DashboardRootModule导出CustomChartModule：

@NgModule({
  ...
  exports: [
    GridPanelComponent,
    GridScrollComponent,
    CustomChartModule.forRoot()
  ]
})
export class DashboardRootModule { }

如果将其从AppModule添加到组件，则还应该从DashboardModule导出DashboardRootModule：

@NgModule({
  ...
  exports: [
    DashboardComponent,
    DashboardRootComponent,
    DashboardRootModule
  ]
})
export class DashboardModule { }

顺便说一下，仅当您要提供带有或不带有提供程序的模块时，forRoot模式才有意义。

Angular ngModules导入错误

2 个答案: