如何將導入文件導入 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。