获取bootstraped组件

时间:2016-09-27 06:54:31

标签: angular typescript

我有一个简单的@NgModule boostrap 2组件:

// Global module for all Angular Component
@NgModule({
    declarations: Components, // directives, components, and pipes owned by this NgModule
    imports: [BrowserModule, HttpModule, FormsModule],
    providers: Providers,
    bootstrap: [Menu, Main]
})
export class MenuModule { }

我想存储由Main引导的MenuModule组件的引用。我尝试实现.then的{​​{1}}方法,但我只获得组件的工厂。

bootstrapModuleDynamic()

有什么想法吗?

1 个答案:

答案 0 :(得分:5)

我看到了两种获取引导组件列表的方法:

1)使用ApplicationRef

platformBrowserDynamic()
    .bootstrapModule(MenuModule)
    .then((menuModule: NgModuleRef<MenuModule>) => {
        const appRef = menuModule.injector.get(ApplicationRef);
        const components = appRef.components;      
    });

2)在您的模块上使用ngDoBootstrap方法:

@NgModule({
    declarations: [Components, // directives, components, and pipes owned by this NgModule
    imports: [BrowserModule, HttpModule, FormsModule],
    providers: Providers,
    entryComponents: [Menu, Main]
    // bootstrap: [Menu, Main]
})
export class MenuModule {
   ngDoBootstrap(appRef: ApplicationRef) {
     const compRefMenu = appRef.bootstrap(Menu);
     const compRefMain = appRef.bootstrap(Main);
   }
}