创建Angular SharedModule

使用AngularMaterial的时候，由于在app.module中有很多Material模块的导入，变得杂乱无章。因此，我想将其分散到其他模块中，以使app.module更加清晰整洁。

app.module.ts在整理之前的状态

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from "@angular/material/core";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

使用命令来创建模块。

ng g module shared --module=app

当你写入 –module=app 时，它会自动将 shared 模块的配置添加到 app.module.ts 中。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from "@angular/platform-browser";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";

import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from "@angular/material/core";

@NgModule({
  declarations: [],
  imports: [],
  exports: [
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
})
export class SharedModule {}

将希望在所有组件中共享使用的模块复制到”shared.module”中。
复制完成后，可以从”app.module”中删除它。
重要的是要将其写在”exports”而不是”imports”中。

整理后的app.module

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SharedModule } from "./shared/shared.module";
@NgModule({
  declarations: [AppComponent],
  imports: [SharedModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

非常清爽。

关于 import 和 export，可以在这里找到有关 NgModule 的常见问题解答。