具有根级别导入的Angular2应用程序模块 [英] Angular2 app module with root level imports

问题描述

不是必须在全球范围内进行根级别的导入(在全球范围内，我指的是所有子模块和组件)?

Shouldn't imports on the root level be available globally (With globally I mean to all sub-modules and components)?

我有以下root/app模块:

I have the following root/app module :

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 {

}

如果我尝试在我的一个子模块中不使用其显示的材料元素，则子模块的外观如下:

If I try to use the material elements in one of my sub modules they don't display, this is what the sub module looks like:

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

但是，如果我将物料模块导入子模块中，则会显示它们.材料设计组件工作时，子模块的外观如下:

However if I import the material modules in the submodule they display. This is what the submodule looks like when the material design components work:

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

如果已经在根级别导入了材料模块，为什么必须再次在子级别上导入材料模块?

Why must the material modules be imported on the sublevel again if they are already imported at the root level?

推荐答案

在Angular2中的组件的概念中，没有什么比您所指的根级别"更重要的了.
组件是模块化的部分，非常类似于Java(或任何高级语言)项目中的类-您还将在其中导入您使用的每个类.
它们可以嵌套或彼此内部使用，但是仍然每个组件都需要导入自己的依赖项.
请注意，与在Angular 1中包含外部模块/库相比，在Angular2中导入是一种非常不同的方法(然后本质上是在index.html中为每个依赖项添加新的引用).
首先是Angular 2中的那些导入，因为Typescript编译器需要知道您的组件中使用了什么(从而增加了更多的功能来进行错误检查)
编译并打包的版本应该只包含每个依赖项一次(只要所有配置都正确).

In the concept of Components in Angular2 there is nothing like a "root level" to which you are referring.
Components are modular pieces very much like Classes in a Java (or whatever High level language) project - where you would also import every Class you use.
They can be nested or used inside each other, but still every components needs to import its own dependencies.
Please note that importing in Angular2 is a very different approach than including a external module/library was in Angular 1 (then essentially beeing a new reference in index.html for each dependency).
Those imports in Angular 2 are there first, because the Typescript-compiler needs to know what is used in your component (thus adding some more power to do error checking)
The compiled and packaged build should include every dependency just once (provided everything is configured correctly).

这篇关于具有根级别导入的Angular2应用程序模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！