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多個組件聲明

回答

相關問題