angular - 在 Angular 中导入大量模块

Question

我正在使用 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，我觉得我做错了什么……有没有更好的方法来导入所有模块？我构建应用程序的方法是否错误？

Answer 1

您可以创建一个“共享”模块来导出您需要的每个 Material Design 模块。然后您可以简单地将“共享”模块导入到需要它们的其他模块中。

这是一个例子:

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

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