如何创建自定义 Angular Material 模块? [英] How to create a custom Angular Material module?

问题描述

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

I was importing the Material library into the base module, app.module.ts, but Angular Material v2.0.0-beta.3 deprecates the Material module.

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

According to the changelog you should now create a custom module that imports the individual Material components. I cannot make this work.

这种方法:

@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 Material 库制作自定义模块?

How do I make a custom module for the Angular Material library?

推荐答案

您的自定义 Angular Material 模块可以镜像 弃用的材料模块.

Your custom Angular Material module can mirror the deprecated Material Module.

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

As the change log indicates, you would want to comment out Material components not used by your application.

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

We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

为了保证用户最终得到最小的代码量可能，我们正在弃用 MaterialModule，将在 a后续发布.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

要替换 MaterialModule，用户可以创建自己的Material"应用程序中的模块(例如 GmailMaterialModule)仅导入应用程序中实际使用的组件集.

To replace MaterialModule, users can create their own "Material" module within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application.

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 { }

这篇关于如何创建自定义 Angular Material 模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！