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>

audio-player を使用しようとするアプリ コンポーネント (表示されません):

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

    <router-outlet></router-outlet>


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

2 に答える 2

4

AudioPlayerComponentFeature Module のエクスポートを追加する必要があります。

コンポーネント、パイプ、ディレクティブを機能モジュールから別のモジュールに使用する場合は、それらをエクスポートする必要があります

  @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 に答える