Angular 2 个模块导入

Question

我有这样的主模块，我在其中导入基本库：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MapModule } from './map/map.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MapModule,
    MaterialModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的问题是，当我在应用程序中创建一个新模块时，即地图模块，我是否需要将所有这些库重新导入该模块。我的印象是，如果我在模块上导入库，它将在子模块下工作。

但是在我的地图模块中，我遇到了这样的错误。

Can't bind to 'ngClass' since it isn't a known property of 'div'.

我当前的 MapModule 看起来像

import { NgModule } from '@angular/core';

import { MapComponent } from './map.component';
import { MapMenuComponent } from './map-menu/map-menu.component';
import { MapControlsComponent } from './map-controls/map-controls.component';
import { MapService } from './map.service';


@NgModule({
    imports: [],
    exports: [],
    declarations: [MapMenuComponent, MapControlsComponent, MapComponent],
    providers: [MapService],
})
export class MapModule { }

我是否需要再次将 MaterialModule、Forms 等重新导入模块才能使该模块中的组件正常工作？

Answer 1

您只需要重新导入带有声明的模块，即定义新组件、指令和管道的模块。不需要导入注册提供者的模块。

在此列表中：

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MapModule,
    MaterialModule.forRoot()
  ],

FormsModule 模块需要导入，by HttpModule 不需要。 BrowserModule 重新导出 CommonModule，因此在其他模块中您可能希望导入 CommonModule，而不是 BrowserModule 以获得内置指令，如 NgClass。通过导入 CommonModule 你不会有这个错误：

Can't bind to 'ngClass' since it isn't a known property of 'div'.

Answer 2

您可以使用 SharedModule。在多个模块中使用的所有模块

共享模块示例

import { NgModule } from '@angular/core';
import { anyService} from './any.service';

@NgModule({
  providers: [anyService]
})
export class SharedModule {}

现在您可以在任何要使用此模块的模块中导入此共享模块

Angular 2 个模块导入

Angular 2 Module Imports

javascript

angular2-modules

angular