根本级别的导入是否全局可用(全局我指的是所有子模块和组件)?
我有以下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 {
}
如果我尝试使用我的一个子模块中的材料元素,它们就不会显示,这就是子模块的样子:
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 {}
如果物料模块已经在根级别导入,为什么必须再次在子级别上导入材料模块?
答案 0 :(得分:46)
Angular的文档令人困惑,他们在几个方面说明你在根模块中导入的模块(app.module.ts
)在全球范围内可用,但除非你仔细阅读(blah),否则很快就会明白一个子模块它打破了继承,子模块为组件创建了自己的应用程序域(不是服务,服务仍然是全局的,至少我读它的方式)。这也是为什么如果你像我一样,我注意到我必须将一些物品导入我的子模块,而其他一些我并没有真正困惑我的原因。以下是有关angular.io的部分:NgModule.html
还有一些值得一提的东西:我认为在Angular2中进行开发,因为RC5 +意味着我需要将所有功能都包装到模块中,事实并非如此。除非你想使用延迟加载或者特别希望与其他人共享代码,例如npm包,否则模块对于我们在Angular2的日常工作中构建并不是必需的。
答案 1 :(得分:9)
在Angular2中的组件概念中,没有什么比你所指的“根级别”更多
组件是模块化的部分,非常类似于Java(或任何高级语言)项目中的类 - 您还可以导入您使用的每个类。
它们可以嵌套或互相使用,但仍然每个组件都需要导入自己的依赖项
请注意,在Angular2中导入是一种非常不同的方法,而不是在Angular 1中包含外部模块/库(然后基本上在index.html中为每个依赖项创建一个新引用)。
首先是Angular 2中的那些导入,因为Typescript编译器需要知道组件中使用的是什么(因此增加了一些功能来进行错误检查)
编译和打包的构建应该只包含一次依赖(假设一切都配置正确)。