如何将导入文件导入 Angular 应用程序模块

Question

我在 app 模块上有多个导入，我想将它们放在不同的文件中并将它们导入 app 模块。 例如：

import { MatButtonModule } from "@angular/material/button";
import { MatInputModule } from "@angular/material/input";
import { MatMenuModule } from "@angular/material/menu";
import { MatRadioModule } from '@angular/material/radio';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';

将所有 Material 导入放在不同的文件中，并将其导入到 app 模块。

谢谢

Answer 1

您可以创建一个单独的模块（或多个，指定用于特定事物，例如一个用于 angular 材料的模块）导入和导出（重要）所有单个模块，然后将该模块导入您的应用程序模块中。

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from "@angular/material/input";
...

@NgModule({
  imports: [ 
    MatButtonModule, 
    MatInputModule,
    ...
  ],
  exports: [ 
    MatButtonModule, 
    MatInputModule,
    ... 
  ],
})
export class MaterialModule { }

比在 app 模块中

import { MaterialModule} from '<path>';

@NgModule({
  imports: [ 
    MaterialModule
  ],
})
export class AppModule{ }

笔记：
如果您有子模块，如果它们需要包含某些组件，也需要导入 MaterialModule。