具有根级别导入的Angular2应用程序模块

Question

根级别的导入不应该是全局可用的(全局的，我指的是所有子模块和组件)？

我有以下root/app模块：

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 {

}

如果我尝试使用其中一个子模块中没有显示的material元素，则该子模块如下所示：

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

Angular的文档令人困惑，他们在几个方面指出，你在根模块(app.module.ts)中导入的模块是全局可用的，但除非你仔细阅读(废话)，否则不会很快明显的是，当你使用子模块时，它会打破继承，子模块为组件创建自己的应用程序域(不是服务，服务仍然是全局的，至少在我阅读它的方式上是这样)。这也是为什么如果你像我一样，我注意到一些我必须导入到我的子模块中的项目，而另一些我没有导入，这真的让我感到困惑。以下是angular.io上讨论这一点的部分：NgModule.html

值得一提的是:我认为由于RC5+意味着我需要将所有功能封装到模块中，所以我认为使用Angular2进行开发并不是这样的。模块对于我们在Angular2的日常工作中并不是必须的，除非你想使用延迟加载或者特别想要与其他人共享代码，例如npm包。