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>
   複製代碼