具有根级导入的 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 {}

但是，如果我在它们显示的子模块中导入 material 模块。这是 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';
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 {}

如果 material 模块已经在根级别导入，为什么还要在子级别再次导入？

Answer 1

在 Angular2 中的组件概念中，您所指的 "root level" 与此完全不同。
组件是模块化的部分，非常类似于 Java（或任何高级语言）项目中的 Classes - 您还可以在其中导入您使用的每个 Class。
它们可以嵌套或在彼此内部使用，但仍然每个组件都需要导入自己的依赖项。
请注意，在 Angular2 中导入与在 Angular1 中包含外部 module/library 是一种非常不同的方法（然后基本上在 index.html 中为每个依赖项创建一个新引用） .
Angular 2 中的那些导入首先出现，因为 Typescript 编译器需要知道您的组件中使用的是什么（因此增加了更多的能力来进行错误检查）
编译和打包的构建应该只包含每个依赖项一次（前提是所有配置都正确）。

Answer 2

Angular 的文档令人困惑，他们在几个区域中声明您在根模块 (app.module.ts) 中导入的模块在全球范围内可用，但除非您仔细阅读，否则不会很快显现出来(blah) 是当你使用一个子模块时它打破了继承并且一个子模块为组件创建它自己的应用程序域（不是服务，服务仍然是全局的，至少我读它的方式）。这也是为什么如果你像我一样，我注意到一些项目我必须导入到我的子模块中，而另一些我没有，这让我很困惑。这是讨论此问题的 angular.io 部分：NgModule.html

其他值得一提的事情：我认为在 Angular2 中进行开发，因为 RC5+ 意味着我需要将所有功能打包到模块中，但事实并非如此。对于我们日常使用 Angular2 构建模块来说，除非您想使用延迟加载或特别希望与他人共享代码，例如 npm 包，否则模块并不是真正必需的。

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

Angular2 app module with root level imports

angular2-material

angular