Angular2 rc5从特性模块中使用组件无法工作

Question

我有一个应用模块和一个功能模块。在feature模块中声明了一个名为"AudioPlayerComponent"的组件。我想在应用模块中使用它，但它没有显示。没有错误。

我错过了什么吗?

应用模块:

@NgModule({
  imports: [
    BrowserModule,
    HomeModule, 
    ReciterModule, // the feature module which has the audio player
    routing
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
  providers: [
    appRoutingProviders,
    AudioPlayerService
  ],
  bootstrap: [AppComponent]
})

功能模块:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    reciterRouting
  ],
  declarations: [
    ReciterDetailComponent, 
    WidgetComponent,
    AudioPlayerComponent  // this is the component I want to also use in the app component
  ],
  providers: [
    AppService,
    RecitersService 
  ]
}) 

特性模块中使用audio-player (Shows)的组件

<div class="reciter-detail">
   ...
    <audio-player></audio-player>
</div>

试图使用audio-player的应用组件(未显示):

<nav-main></nav-main> 
 <div class="container">
    <router-outlet></router-outlet>

    <audio-player></audio-player>
</div>

Answer 1

您必须在Feature Module的导出中添加AudioPlayerComponent。

如果你想从特性模块中使用任何组件、管道、指令到另一个模块中，你需要导出它们

  @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     HttpModule,
     reciterRouting
    ],
   declarations: [
     ReciterDetailComponent, 
     WidgetComponent,
     AudioPlayerComponent  // this is the component I want to also use in the app component
   ],
   //add exports
   exports: [ 
      AudioPlayerComponent
   ],
   providers: [
     AppService,
     RecitersService 
   ]
  }) 

Answer 2

接受的答案是正确的。我最后阅读了指南并制作了一个单独的共享模块。

共享模块:

@NgModule({
    imports: [CommonModule],
    declarations: [
        AudioPlayerComponent
    ],
    exports: [ 
        AudioPlayerComponent,
        CommonModule,
        FormsModule
    ]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [AppService,AudioPlayerService]
        };
    }
}

<<p> 应用模块/strong>

@NgModule({
  imports: [
    BrowserModule,
    HomeModule, 
    ReciterModule,
    routing, 
    SharedModule.forRoot()
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
  providers: [
    appRoutingProviders 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<<p> 功能模块/strong>

@NgModule({
  imports: [ 
    HttpModule,
    reciterRouting,
    SharedModule
  ],
  declarations: [
    ReciterDetailComponent, 
    WidgetComponent 
  ],
  providers: [ 
    RecitersService 
  ],
  exports: [ReciterDetailComponent]
})