0

我有一个应用程序模块和一个功能模块。在功能模块中声明了一个名为“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 
  ]
})

功能模块中使用音频播放器（节目）的组件

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

</div>

尝试使用音频播放器的应用程序组件（不显示）：

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

    <router-outlet></router-outlet>


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

2 回答 2

4

您必须添加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 
   ]
  })

在此处阅读有关 NgModule 属性的更多信息。

于 2016-08-22T02:16:56.080 回答
0

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

共享模块：

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

应用模块

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

功能模块

@NgModule({
  imports: [ 
    HttpModule,
    reciterRouting,
    SharedModule
  ],
  declarations: [
    ReciterDetailComponent, 
    WidgetComponent 
  ],
  providers: [ 
    RecitersService 
  ],
  exports: [ReciterDetailComponent]
})
于 2016-08-22T03:07:49.120 回答