Material(包括Material Icon)在Angular2中的使用

ngx-material相关网址

​ 目前我们使用的是angular5,因此我们选择ngx-material v5版本。

1. 官网地址
2. github地址
3. demo代码地址

引入material

1. 引入material npm包以及相关的包

   npm install @angular/material @angular/cdk 
   复制代码

2. 因为一些Angular Material组件依赖Angular animations模块，所以在使用Angular Material时需要安装@angular/animations模块(新建项目时会有，如果没有，在第一步中一起安装@angular/animations)，并且需要导入BrowserAnimationsModule

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
       BrowserModule,
         BrowserAnimationsModule
        ],
       providers: [],
           bootstrap: [AppComponent]
       })
       
   export class AppModule { }
   
   复制代码

3.新建一个module统一管理material的module引入

ng g module ebiz-material
复制代码

4.在app的根module中引入ebiz-material.module.ts

```typescript
import { EbizMaterialModule } from './ebiz-material/ebiz-material.module';
@NgModule({
    imports: [..., EbizMaterialModule],
    declarations: [
        ...
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
复制代码

使用material组件

1. 首先在ebiz-material.module.ts中引入material组件的module，例如我们要用到checkbox，那就引入MatCheckboxModule，引入之后再exports。

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { MatCheckboxModule } from '@angular/material';
   
   @NgModule({
     imports: [CommonModule, MatCheckboxModule],
     declarations: [],
     exports: [ MatCheckboxModule ]
   })
   export class EbizMaterialModule { }
   
   复制代码

2. 在html文件中使用组件

 <mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>
复制代码

3. 此时会报错

   compiler.js:485 Uncaught Error: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'mat-checkbox'.
    1. If 'mat-checkbox' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
    2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<mat-checkbox [ERROR ->][(ngModel)]="checked">
      Check me!</mat-checkbox>"): ng:///AppModule/AppComponent.html@0:14
        at syntaxError (compiler.js:485)
        at TemplateParser.parse (compiler.js:24667)
        at JitCompiler._parseTemplate (compiler.js:34620)
        at JitCompiler._compileTemplate (compiler.js:34595)
        at eval (compiler.js:34496)
        at Set.forEach (<anonymous>)
        at JitCompiler._compileComponents (compiler.js:34496)
        at eval (compiler.js:34366)
        at Object.then (compiler.js:474)
        at JitCompiler._compileModuleAndComponents (compiler.js:34365)
   复制代码

   按照错误提示，在app.module.ts中引入CUSTOM_ELEMENTS_SCHEMA

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
   
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { AppComponent } from './app.component';
   import { MaterialModule } from './material/material.module';
   import { RouterModule } from '@angular/router';
   
   @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MaterialModule,
     RouterModule.forRoot([
       {
         path: '',
         component: AppComponent
       }
     ])
   ],
   providers: [],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
   })
   export class AppModule { }
   复制代码

使用material内置theme以及自定义theme

1. material中的组件会根据theme的不同，会有不一样的样式呈现，但是这些样式的不同只局限于material组件内部，不会影响自定义组件的样式。

2. 在style.css文件中引入material预建主题(总共4个)

    @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 
    @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 
    @import '~@angular/material/prebuilt-themes/pink-bluegrey.css';  
    @import '~@angular/material/prebuilt-themes/purple-green.css'; 
   复制代码

   如果报下面这个错，只要将angular-cli的版本从1.6.4降低到1.6.3就可以解决

       ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
       Module build failed: Error: Can't resolve '~@angular/material/prebuilt-themes/deeppurple-amber.css' in 'D:\ebizprise\material-demo\src'
   复制代码

3. 如果觉得这些主题不适合，可以自定义主题，在styles.css同级目录下新建一个theme.scss，并写上自定义主题的内容

   @import '~@angular/material/theming';
   @include mat-core();
   $my-app-primary: mat-palette($mat-blue); 
   $my-app-accent: mat-palette($mat-teal, A200, A100, A400); 
   $my-app-warn: mat-palette($mat-red); 
   $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
   @include angular-material-theme($my-app-theme);
   复制代码

   在style.css中引入theme.scss自定义主题,

   @import './theme';
   复制代码

   此时会报下面这个错误

    ERROR in ./node_modules/css-loader?		{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
    Module not found: Error: Can't resolve './theme' in 'D:\ebizprise\material-demo\src'
复制代码

可以将全部的css文件修改为scss文件，并且在angular-cli.json文件中修改为

    "styleExt": "scss",
复制代码

也不能忘记angular-cli.json中引入style.css改为style.scss 5. 在步骤3中用到了一些颜色，例如$mat-blue，可以参考这里

6. 如果想要对某个组件进行主题特制，可以参考这里

安装hammerjs(手势操作才需要)

1. 安装hammerjs

      npm install --save hammerjs
   复制代码

2. 在程序的入口(src/main.ts)引入hammerjs

   import 'hammerjs';
   复制代码

使用material-icon

1. install material-icon

   npm install material-design-icons
   复制代码

2. 在style.scss中引入material-icon图标库

   @import '~material-design-icons/iconfont/material-icons.css';
   复制代码

3. 在ebiz-material.module.ts中引入MatIconModule

   import { MatIconModule } from '@angular/material';
   
   @NgModule({
     imports: [
       ...
       MatIconModule
       ...
     ],
     exports: [
       ...
       MatIconModule
       ...
     ]
   })
   复制代码

4. 在html的适当位置放上图标

     <mat-icon>menu<mat-icon>
   复制代码

使用其他图标库

1. 将从网上下载的图标库放入到assets文件夹

2. 在index.html中引入图标库

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>EbizWorkspace</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link href="assets/icons/style.css" rel="stylesheet">
   </head>
   <body>
     <app-root></app-root>
   </body>
   </html>
   复制代码

3. 在app.component.ts中注册图标库

   import { Component, OnInit } from '@angular/core';
   import { MatIconRegistry } from '@angular/material';
   import { DomSanitizer } from '@angular/platform-browser';
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     constructor(private matIconRegistry: MatIconRegistry) {
       this.matIconRegistry.registerFontClassAlias('icomoon', 'icon');
     }
   
     ngOnInit() { }
   }
   
   复制代码

4. 在html中使用

   <mat-icon fontSet="icomoon" fontIcon="icon-treeview" ></mat-icon>
   复制代码

转载于:https://juejin.im/post/5a7272546fb9a01c99512209