1

我正在开发一个通用的 Ionic 2 应用程序，该应用程序包括在第一页上加载和显示多个组件。

每个附加组件都需要很容易地在应用程序中轻松创建和实施。所以我创建了一个名为“ addon-declaration.ts ”的文件。在这个文件中，我导出了所有组件：

export { MyFirstAddon } from './components/addon1/first.addon';
export { MySecondAddon } from './components/addon2/second.addon';
export { MyThirdAddon } from './components/addon3/third.addon';

所以我的问题是如何直接在“ app.module.ts ”声明字段中导入我的所有组件？

我已经尝试过了，但它不起作用：/

import * as ModuleHandler from '../models/addons/addon-declaration';

@NgModule({
  declarations: [
    MyApp,
    ModuleHandler <--- Not working
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

如果我一个一个地导入它们，那就太好了：

import { MyFirstAddon } from'../components/addon1/first.addon';
import { MySecondAddon } from'../components/addon2/second.addon';
import { MyThirdAddon } from'../components/addon3/third.addon';

@NgModule({
      declarations: [
        MyApp,
        MyFirstAddon, <--- Working well
        MySecondAddon,
        MyThirdAddon
      ],
4

3 回答 3

4

创建一个功能模块来导出您的组件和指令

@NgModule({
  declarations: [MyFirstAddon, MySecondAddon, MyThirdAddon],
  exports: [MyFirstAddon, MySecondAddon, MyThirdAddon]
})
export class MyAddonModule {}

将该模块添加到要使用插件的其他模块的导入中

import { MyAddonModule } from './components/my-addon-module';

@NgModule({
  declarations: [
    MyApp,
    ModuleHandler <--- Not working
  ],
  imports: [
    IonicModule.forRoot(MyApp), MyAddonModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
于 2016-12-30T13:40:22.900 回答
1 
declarations: [
   MyApp,
   ModuleHandler.MyFirstAddon,
   ModuleHandler.MySecondAddon,
   ModuleHandler.MyThirdAddon
]

或使用导出它们的 ngModule 并导入模块。

于 2016-12-30T13:40:00.637 回答
1

在该文件夹中创建一个index.ts放置所有插件文件的文件夹，然后导出所有文件，例如：

export * from './first.addon';
export * from './second.addon';
export * from './third.addon';
.....

然后在你需要导入你喜欢的所有插件文件之后app.module.ts：

import * as allAddons from './addons_files';

最后你需要使用allAddons像这样的对象：

@NgModule({
    declarations: [
      // all-addons
      allAddons.FirstAddon,
      allAddons.SecondAddon,
      allAddons.ThirdAddon
    ]
})
export class AppModule() {
}
于 2017-11-15T10:54:23.390 回答