如何在Angular2中为多个模块创建包装器模块?

时间:2016-09-23 18:09:26

标签: angular

我目前正在尝试清理我的项目结构,并希望尽可能保持AppComponent的清洁。我在自己的文件中导入angular2材料:

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

// Material
import { MdCardModule } from '@angular2-material/card';
import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdListModule } from '@angular2-material/list';
import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';

export const MATERIAL_UI_MODULES = [
  MdCardModule,
  MdButtonModule,
  MdInputModule,
  MdToolbarModule,
  MdIconModule,
  MdListModule
]
export const MATERIAL_UI_REGISTRIES = [
  MdIconRegistry
]

在我的AppController中,我按如下方式使用它:

const APP_PROVIDERS = [
  ...MATERIAL_UI_REGISTRIES
];

const APP_MODULES = [
    ...MATERIAL_UI_MODULES,
];

@NgModule({
  imports:APP_MODULES,
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers: APP_PROVIDERS,
})
export class AppModule {

}

但有没有办法创建一个我可以导入的MaterialModule,而不必担心添加单个模块或提供程序。

我尝试过创建一个MaterialModule:

@NgModule({
  imports:[
    ...MATERIAL_UI_MODULES,
  ],
  providers: MATERIAL_UI_REGISTRIES,
})
export class MaterialModule {

}

并在我的AppComponent中导入:

@NgModule({
  imports:[
    //...MATERIAL_UI_MODULES,
    MaterialModule,
    FormsModule,
    BrowserModule,
    routing,
    ComponentsModule
  ],
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers: APP_PROVIDERS,
})
export class AppModule {

}

但是我收到以下错误

zone.js:355 Unhandled Promise rejection: Template parse errors:
'md-card-title' is not a known element:
1. If 'md-card-title' is an Angular component, then verify that it is part of this module.
2. If 'md-card-title' is a Web Component then add    "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to 
suppress this message. ("....

1 个答案:

答案 0 :(得分:1)

您可以使用 SharedModule 。在 SharedModule 中声明常见内容,然后在要使用常用内容的组件中导入 SharedModule

在此处详细了解SharedModule:https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module