web-dev-qa-db-ja.com

ルートレベルのインポートを備えたAngular2アプリモジュール

ルートレベルでのインポートはグローバルに使用可能にすべきではありません（グローバルには、すべてのサブモジュールとコンポーネントを意味します）。

次のルート/アプリモジュールがあります。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRouterProviders, routing } from './app.routes';
import { DashboardModule } from './dashboard/dashboard.module';
import { DecisionModule } from './decision/decision.module';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  declarations: [
    AppComponent                    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule,    
    routing,
    DashboardModule,
    MdCoreModule,
    MdButtonModule,
    MdCardModule,
    MdListModule,
    MdSidenavModule,    
    MdToolbarModule,
    MdIconModule
  ],
  providers: [
    appRouterProviders
  ],
  entryComponents: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {

}

サブモジュールのいずれかで表示されないマテリアル要素を使用しようとすると、サブモジュールは次のようになります。

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting,    
  ],
  declarations: [
    DashboardComponent,
    ActionsDialogComponent    
  ],
  providers: [    
  ]
})
export class DashboardModule {}

ただし、サブモジュールに材料モジュールをインポートすると、表示されます。これは、材料設計コンポーネントが機能する場合のサブモジュールの外観です。

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting,
    MdCoreModule,
    MdButtonModule,
    MdCardModule,
    MdListModule,
    MdSidenavModule,    
    MdToolbarModule,
    MdIconModule,
  ],
  declarations: [
    DashboardComponent,
    ActionsDialogComponent    
  ],
  providers: [    
  ]
})
export class DashboardModule {}

素材モジュールがルートレベルで既にインポートされている場合、サブレベルで再びインポートする必要があるのはなぜですか？

angularangular2-material
17
Werner Swart

Angularのドキュメントはわかりにくいため、ルートモジュールにインポートしたモジュール（app.module.ts）はグローバルに利用できますが、完全に読まない限り（ブラー）、サブモジュールを使用すると、その継承が中断され、サブモジュールがコンポーネント（サービスではなく、サービスはまだグローバルであり、少なくとも私がそれを読んだ方法）。あなたが私のようであれば、サブモジュールにインポートしなければならないアイテムと、私が本当に混乱させた他のアイテムに気付いた理由でもあります。これについては、angular.ioのセクションを参照してください。 NgModule.html

言及する価値のあるもの：RC5 +はすべての機能をモジュールにまとめる必要があるため、Angular2で開発すると考えましたが、これは単にそうではありません。遅延読み込みを使用する場合や、npmパッケージなどのコードを他の人と共有したい場合を除き、Angular2を使用した一般的な日々の作業でモジュールを構築する必要はありません。

47
Helzgate