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

Question

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

我被建议在主模块中导入组件，并在要使用它的其他页面中继承该组件，而不是将相同的组件导入到多个模块中。我不知道该怎么做。当我单独导入主模块时(如下所示)，我仍然会收到导入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 }导入和声明。

任何帮助都会很感谢，谢谢。

Answer 1

所有模块都将导入到主模块中。

尝试使用into main.module.ts

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

注释这些文件中的MainPageModule行

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

Answer 2

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