我目前正在尝试清理我的项目结构,并希望尽可能保持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. ("....
答案 0 :(得分:1)
您可以使用 SharedModule 。在 SharedModule 中声明常见内容,然后在要使用常用内容的组件中导入 SharedModule 。
在此处详细了解SharedModule:https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module