我正在开发一个通用的 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
],
创建导出组件和指令的功能模块
@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}]
})
declarations: [
MyApp,
ModuleHandler.MyFirstAddon,
ModuleHandler.MySecondAddon,
ModuleHandler.MyThirdAddon
]
或者使用 ngModule 导出它们并导入模块。
在放置所有插件文件的文件夹中创建一个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() {
}