如何创建自定义 Angular Material 模块？

Question

我将 Material 库导入到基本模块 app.module.ts，但 Angular Material v2.0.0-beta.3 弃用了 Material 模块。

根据changelog，您现在应该创建一个自定义模块来导入各个 Material 组件。我无法完成这项工作。

这种方法：

@NgModule({
  declarations: [ MdInputModule ],
  imports: [
    CommonModule,
    MdInputModule
  ],
  exports: [ MdInputModule ]
})

export class FooMaterialModule {}

导致此错误：

Uncaught Error: Unexpected module 'MdInputModule' declared by the module 'FooMaterialModule'. Please add a @Pipe/@Directive/@Component annotation. 

如何为 Angular 材质库制作自定义模块？

Answer 1

您的自定义 Angular Material 模块可以镜像deprecated Material Module。

正如更改日志所示，您可能希望注释掉您的应用程序未使用的 Material 组件。

我们发现，在世界上目前的摇树状态下， 使用像 MaterialModule 这样的聚合 NgModule 会导致工具 无法消除未使用的组件的代码。

为了确保用户最终获得最小的代码大小 可能，我们正在弃用 MaterialModule，将其在 a 后续发布。

要替换 MaterialModule，用户可以创建自己的“Material” 他们应用程序中的模块（例如，GmailMaterialModule） 仅导入应用程序中实际使用的组件集。

my-material.module.ts

import {NgModule} from '@angular/core';
import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';

@NgModule({
  exports: [
    A11yModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MyMaterialModule {}

app.module.ts

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

...

import { MyMaterialModule } from './my-material.module';


@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,

    ...

    MyMaterialModule
    ],
  providers: [],
  bootstrap: [ AppComponent ]

})

export class AppModule { }

Answer 2

您可以创建如下所示的功能模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdInputModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    MdInputModule
    BrowserAnimationsModule
  ]
})
export class CustomMaterialModule { }

然后在你的 app.module.ts 中导入它：

import {CustomMaterialModule} from "./custom-material/custom-material.module";
...
@NgModule({
  ...
  imports: [
    ...
    CustomMaterialModule
  ]
  ...
})