具有根級別導入的Angular2應用程序模塊

Question

不應該在根級別導入全局可用（對於全局來說，我指的是所有子模塊和組件）？

我有以下根/應用模塊：

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

爲什麼必須在材料模塊上，如果他們再次在根級別已經導入了礦石進口？

Answer 1

在Angular2的組件概念中，沒有什麼像您所指的「根級別」。
組件是非常像Java中的類（或任何高級語言）項目的模塊化部分 - 您還可以導入您使用的每個類。
它們可以互相嵌套或使用，但每個組件仍需要導入自己的依賴關係。
請注意，在Angular2中導入是一種非常不同的方法，而不是在Angular 1中包含一個外部模塊/庫（然後基本上在每個依賴項的index.html中新建一個引用）。
那些在Angular 2中的導入是第一次的，因爲Typescript編譯器需要知道你的組件中使用了什麼（因此增加了一些更多的功能來進行錯誤檢查）
編譯和打包的版本應該只包含一次依賴只要一切配置正確）。

Answer 2

角的文檔是混亂的，他們在幾個方面指出模塊在根模塊（app.module.ts）中導入全球都可以，但除非你讀透的是不能很快明顯（等等）是，當你使用一個子模塊它打破繼承和子模塊創建它自己的組件的應用程序域（不是服務，服務仍然是全球性的，至少我閱讀它的方式）。這也是爲什麼如果你像我一樣，我注意到我必須導入到我的子模塊中的一些項目，而其他我沒有讓我困惑的項目。這裏討論angular.io的一節：NgModule.html

其他值得一提的東西：我認爲從RC5 +開始在Angular2中開發意味着我需要將所有功能包裝到模塊中，但事實並非如此。除非您想使用延遲加載或特別希望與其他人共享代碼，例如npm包，否則模塊對我們來說並不是真的需要在Angular2中進行常規的日常工作。