在Angular中导入很多模块 [英] Importing a lot of modules in Angular

问题描述

我正在使用Angular 4和Angular Material构建应用程序，每个Material指令都要求我单独导入其模块..

I'm building an app with Angular 4 and Angular Material, each Material directive requires me to import its module separately..

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

For example, i'm building a navigation bar, this is how the nav.module.ts starts to look like:

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，还有其他模块需要导入...

There are only 3 Material modules right now, i will need to add more later and except Material, there are also other modules that need to be imported...

刚开始从AngularJS迁移到Angular4，我觉得我做错了什么...有没有更好的方法来导入所有模块？我构建应用程序的方法是错误的吗？

Just started moving from AngularJS to Angular4 it feels to me like i'm doing something wrong... Is there a better way to import all the modules? Is my approach to structuring the app is wrong?

推荐答案

您可以创建一个共享模块，导出您需要的每个Material Design模块。然后您只需将共享模块导入到您的其他模块中需要它们的模块。

You can create a "shared" module that exports each of the Material Design modules that you need. Then you can simply import the "shared" module into your other modules that need them.

这是一个例子：

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

In this picture I have a shared module that is exporting CommonModule and FormsModule. The ProductModule then imports the SharedModule to get all of the functionality provided by the CommonModule and FormsModule.

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

I have a youtube video about this here: https://www.youtube.com/watch?v=ntJ-P-Cvo7o

这篇关于在Angular中导入很多模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！