Angular 2多个组件声明

我正在处理一个通用的Ionic 2应用程序，它包含在第一页上加载和显示多个组件。Angular 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 
     ],

来源

2016-12-30 iDev

模块没有被声明，但是导入的'imports：[ModuleHandler]'，然后在'ModuleHandler'中导出你的组件在其他模块中可用。 – Erevald

创建出口的组件和指令

@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-30 13:40:22

Brillant thx很多！ – iDev

declarations: [ 
    MyApp, 
    ModuleHandler.MyFirstAddon, 
    ModuleHandler.MySecondAddon, 
    ModuleHandler.MyThirdAddon 
]

或使用ngModule是它们导出和导入该模块。

来源

2016-12-30 13:40:00

创建其他模块的进口功能模块一个index.ts里面的文件夹放置所有的插件文件，然后导出所有文件喜欢E：

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-15 10:54:23

Angular 2多个组件声明

回答

相关问题