如何创建自定义Angular Material模块？ （材料v2.0.0-beta.3）

Question

我曾经将Material库导入基础模块app.module.ts，但Angular Material v2.0.0-beta.3不推荐使用Material模块。根据更改日志（https://github.com/angular/material2/blob/master/CHANGELOG.md），您现在应该创建一个导入单个Material组件的自定义模块。我无法做到这一点。

这种方法：

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

export class FooMaterialModule {}

导致此错误：

未捕获错误：模块'FooMaterialModule'声明的意外模块'MdInputModule'。请添加@ Pipe / @ Directive / @ Component注释。

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

Answer 1

您的自定义角度材质模块可以镜像deprecated Material Module。

如更改日志所示，您需要注释掉应用程序未使用的材料组件。

  

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

     

为了确保用户以最小的代码大小结束   可能，我们正在弃用MaterialModule，要在a中删除   随后的发布。

     

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

MY-material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MatAutocompleteModule } from '@angular/material'; 
import { MatButtonToggleModule } from '@angular/material';
import { MatButtonModule } from '@angular/material';
import { MatCheckboxModule } from '@angular/material';
import { MatDialogModule } from '@angular/material';  
import { MatListModule } from '@angular/material';  
import { MatGridListModule } from '@angular/material';
import { MatCardModule } from '@angular/material';  
import { MatChipsModule } from '@angular/material';  
import { MatIconModule } from '@angular/material';  
import { MatInputModule } from '@angular/material'; 
import { MatMenuModule } from '@angular/material';  
import { MatProgressSpinnerModule } from '@angular/material';
import { MatProgressBarModule } from '@angular/material'; 
import { MatRadioModule } from '@angular/material'; 
import { MatRippleModule } from '@angular/material';
import { MatSelectModule } from '@angular/material';  
import { MatSlideToggleModule } from '@angular/material';
import { MatSliderModule } from '@angular/material';  
import { MatSidenavModule } from '@angular/material'; 
import { MatSnackBarModule } from '@angular/material';
import { MatTabsModule } from '@angular/material';  
import { MatToolbarModule } from '@angular/material';  
import { MatTooltipModule } from '@angular/material';


const MATERIAL_MODULES = [
  CommonModule,
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatChipsModule,
  MatCheckboxModule,
  MatGridListModule,
  MatInputModule,
  MatListModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatTabsModule,
  MatToolbarModule,

  // These modules include providers.
  MatButtonToggleModule,
  MatDialogModule,
  MatIconModule,
  MatMenuModule,
  MatRadioModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatTooltipModule
];


@NgModule({
  imports: MATERIAL_MODULES,
  exports: MATERIAL_MODULES
})
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
  ]
  ...
})