如何在 Javascript 中的组件文件之间导出/导入模块答案

【问题标题】：How to export/import modules between component files in Javascript如何在 Javascript 中的组件文件之间导出/导入模块
【发布时间】：2018-04-05 16:00:30
【问题描述】：

我有一个关于页面如何处理导入的一般性问题。当您将一个文件导入另一个文件时，导入的文件声明和导入是否在您导入的文件中可用？

建议我不要将同一个组件导入多个模块，而是将组件导入主模块并在我想要使用它的其他页面中继承该组件。我不知道如何执行此操作。当我只导入主模块时（如下所示），我仍然收到未定义导入 ChartComponent 的错误。如何将模块导入其他模块？

我有一个包含以下代码的页面：

main.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MainPage } from './main';
import { MomentModule, TimeAgoPipe } from "angular2-moment";
import { AlertCardComponent } from '../../components/alert-card/alert-card';  
import { AlertCardManageComponent } from '../../components/alert-definition-card/alert-definition-card';  
import { ThingCardComponent } from '../../components/thing-card/thing-card';
import { ThingDetailsPage } from '../thing-details/thing-details';
import { AttributesPage } from "../attributes/attributes";

import { ChartComponent } from '../../components/chartist/chart.component';

@NgModule({
  declarations: [
    MainPage,
    AlertCardComponent,
    AlertCardManageComponent,
    ThingCardComponent,
    ChartComponent
  ],
  imports: [
    IonicPageModule.forChild(MainPage),
    MomentModule
  ],

  exports: [AlertCardComponent,AlertCardManageComponent,ThingCardComponent,ThingDetailsPage,AttributesPage]

})
export class MainPageModule { }

我想从此页面访问 { ChartComponent } 导入/声明并让以下两个文件继承它：

things-details.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ThingDetailsPage } from './thing-details';
import { MomentModule } from "angular2-moment";
import { MainPageModule } from '../main/main.module'; 
// import { ChartComponent } from '../../components/chartist/chart.component';

@NgModule({
  declarations: [
    ThingDetailsPage,
    // ChartComponent
  ],
  imports: [
    IonicPageModule.forChild(ThingDetailsPage),
    MomentModule,
    MainPageModule
  ] 
})
export class ThingDetailsPageModule {}

attributes.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AttributesPage } from "../attributes/attributes";
import { MainPageModule } from '../main/main.module';
import {MomentModule} from "angular2-moment";
// import { ChartComponent } from '../../components/chartist/chart.component';

@NgModule({
  declarations: [
    AttributesPage,
    // ChartComponent
  ],
  imports: [
    IonicPageModule.forChild(AttributesPage),
    MomentModule,
    MainPageModule
  ] 
})
export class AttributePageModule {}

如上所示，我将 MainPageModule 导入到我的每个子文件中，但我仍然无法访问 main.module.ts 文件中的 { ChartComponent } 导入和声明。

任何帮助将不胜感激，谢谢。

【问题讨论】：

你有惰性模块吗？

标签： javascript angular file charts chart.js

【解决方案1】：

所有模块将被导入主模块。

尝试使用成main.module.ts:

imports: [
    IonicPageModule.forChild(MainPage),
    MomentModule,
    ThingDetailsPageModule,
    AttributePageModule
],

从这些文件中注释MainPageModule 行

things-details.module.ts
attributes.module.ts

【讨论】：

【解决方案2】：

在您的主模块中，尝试将ChartComponent 添加到exports: [AlertCardComponent,AlertCardManageComponent,ThingCardComponent,ThingDetailsPage,AttributesPage] 的列表中。

【讨论】：