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

发布时间：2020-12-17 07:15:34 所属栏目：安全来源：网络整理

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

我曾经将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库创建自定义模块？

解决方法

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

如更改日志所示,您需要注释掉应用程序未使用的Material组件.

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.

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.

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.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!