17

ルート レベルでのインポートをグローバルに利用できるようにすべきではありませんか (グローバルとは、すべてのサブモジュールとコンポーネントを意味します)。

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

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 {

}

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

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 {}

マテリアル モジュールがルート レベルで既にインポートされている場合、サブレベルで再度インポートする必要があるのはなぜですか?

4

2 に答える 2

9

Angular2 のコンポーネントの概念では、参照している「ルート レベル」のようなものはありません。
コンポーネントは、Java (またはその他の高級言語) プロジェクトのクラスに非常によく似たモジュラー ピースです。ここでは、使用するすべてのクラスもインポートします。
それらはネストしたり、相互に使用したりできますが、それでもすべてのコンポーネントは独自の依存関係をインポートする必要があります。
Angular2 でのインポートは、Angular 1 での外部モジュール/ライブラリの組み込みとは非常に異なるアプローチであることに注意してください (基本的に、依存関係ごとに index.html で新しい参照になります)。
Typescript-compiler はコンポーネントで何が使用されているかを知る必要があるため、Angular 2 のこれらのインポートが最初に存在します (したがって、エラー チェックを実行するための機能が追加されます)。
コンパイルおよびパッケージ化されたビルドには、すべての依存関係が 1 回だけ含まれている必要があります (すべてが正しく構成されている場合)。

于 2016-08-26T06:51:22.687 に答える