在Angular中导入很多模块

亚历克斯·莱博维奇

我正在使用Angular 4和Angular Material构建应用程序,每个Material指令都要求我分别导入其模块。

例如,我正在构建一个导航栏,这就是nav.module.ts开始的样子:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NavComponent} from './nav.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { MdInputModule } from '@angular/material';
import { MdMenuModule } from '@angular/material';
import {MdButtonModule} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

@NgModule({
imports: [
    CommonModule,
    AngularFontAwesomeModule,
    MdInputModule,
    MdMenuModule,
    MdButtonModule,
    FlexLayoutModule,
    HttpClientModule,

    ....

现在只有3个Material模块,以后我需要添加更多,并且除了Material,还有其他模块需要导入...

刚开始从AngularJS迁移到Angular4,我觉得自己做错了什么……是否有更好的方法来导入所有模块?我构建应用程序的方法是否错误?

德博拉

您可以创建一个“共享”模块,以导出所需的每个“材料设计”模块。然后,您可以简单地将“共享”模块导入到需要它们的其他模块中。

这是一个例子:

在此处输入图片说明

在这张照片中,我有一个共享模块,该模块正在导出CommonModule和FormsModule。然后,ProductModule导入SharedModule以获取CommonModule和FormsModule提供的所有功能。

我在这里有一个有关此的youtube视频:https : //www.youtube.com/watch?v= ntJ-P- Cvo7o

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章