Material使用02 圖標MdIconModule、矢量圖作為圖標使用及改進

 

1 MdIconModule模塊的使用

　　1.1 在需要用到的模塊中引入Material圖標模塊

　　　　

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import  { MdSidenavModule, MdToolbarModule, MdIconModule, MdButtonModule } from '@angular/material';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent,
    HeaderComponent,
    MainComponent,
    FooterComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　1.2 利用md-icon組件來實現圖標顯示

　　　　<md-icon>圖標名字</md-icon>

　　　　　　技巧01：這里的圖標名字不是自定義的，而實根據material官網的規則來定的

　　　　　　技巧02：material官方提供的圖標 -> 點擊前往

　　　　　　技巧03：使用md-icon組件實現圖標顯示時需要在主頁面導入Google的圖標庫，由於種種原因我們不能直接應用Google的圖標庫，所以我們可以利用鏡像來解決

　　　　　　　　<link href="//lib.baomitu.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">

　　　　　　代碼解釋：只要圖標名字是合法的，那么md-icon組件就會顯示出圖標名字對應的圖標來

    <md-icon>alarm</md-icon>
    <md-icon>android</md-icon>
    <md-icon>fingerprint</md-icon>

　　　　

　　1.3 代碼完善

<md-toolbar color=primary>
    <button md-icon-button (click)="openSidebar()">
        <md-icon>menu</md-icon>
    </button>
    &nbsp;
    <span>企業協作平台</span>
</md-toolbar>

　　代碼解釋：由於md-icon組件是在button元素內的，所以如果不對button元素進行重構就會是如下的顯示效果

 　　　　

　　通過MdButtonModule模塊將一般的button元素變成icon型的button元素：在需要用的模塊導入MdButtonModule模塊，在需要進行改造的button元素上添加

md-icon-button，完成這兩步后的顯示效果如下：

　　　　

 

2 如何將矢量圖作為圖標進行顯示

　　2.1 矢量圖：點擊前往

　　2.2 阿里巴巴矢量圖庫：點擊前往

　　2.3 從阿里巴巴的矢量圖庫匯總下載一張svg矢量圖

　　2.4 將下載好的svg矢量圖復制到angular2項目中的assets文件夾中

　　2.5 在需要用矢量圖作為圖標的組件中引入兩個模塊

import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser'; 

　　　　技巧01：MdIconRegistry的作用是對svg圖標進行注冊

　　　　技巧02：DomSanitizer的作用是構造一個安全的url

　　2.6 在需要用矢量圖作為圖標的組件的構造函數中依賴注入引入的兩個模塊並做相應的初始化

  constructor(
    mdIconRegistry: MdIconRegistry, domSanitizer: DomSanitizer
  ) { 
    mdIconRegistry.addSvgIcon('glasses', domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/glasses.svg'));
  }

　　代碼解釋：mdIconRegistry.addSvgIcon('別名', domSanitizer.bypassSecurityTrustResourceUrl('svg資源路徑'));

　　　　別名 -> 在md-icon組件中需要用到

　　　　svg資源路徑 -> 別名對應的那個svg圖片所在的路徑

　　2.7 在使用矢量圖作為圖標的組件所在的模塊中引入HttpModule模塊

　　　　原因：利用矢量圖作為圖標是需要依賴HttpModule

import { HttpModule } from '@angular/http';

　　2.8 在需要用svg圖片作為圖標展示的地方利用md-icon組件進行顯示

<md-icon svgIcon="glasses"></md-icon>

　　代碼解釋：<md-icon svgIcon="別名"></md-icon>

　　　　別名就是svg資源對應的別名，是開發者自定義的

　　技巧：使用md-icon將svg圖片作為圖標顯示時別名是svgIcon屬性的值；使用md-icon將material提供的圖標進行顯示時別名是md-icon組件的value值

 　　

 

3 使用svg圖作為圖標的改進方案

　　3.1 每一個組件都必須導入MdIconRegistry和DomSanitizer ，而且還必須對svg圖片資源進行注冊，最嚴重的是無法進行復用

　　3.2 解決辦法：

　　　　將svg圖片資源注冊單獨拿出來用一個方法實現，然后將這個方法放到一個核心模塊中，再將這個核心模塊導入到主模塊中

　　3.3 svg圖片注冊方法

import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser'; 

export const loadSvgResources = (mdIconRegistry: MdIconRegistry, domSanitizer: DomSanitizer) => {
    mdIconRegistry.addSvgIcon('glasses', domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/glasses.svg'));
    mdIconRegistry.addSvgIcon('China', domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/China.svg'));
};

　　3.4 將svg注冊方法放到核心模塊的構造函數中

　　　　

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

import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser'; 
import { loadSvgResources } from '../utils/svg.util';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CoreModule { 
  constructor(
    @Optional() @SkipSelf() parent: CoreModule,
    mdIconRegistry: MdIconRegistry,
    domSanitizer: DomSanitizer
  ) {
    if (parent) {
      throw new Error('核心模塊已經存在，只能加載一次');
    }
    loadSvgResources(mdIconRegistry, domSanitizer);
  }
}

　　3.5 通過主模塊加載核心模塊

　　　　

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import  { MdSidenavModule, MdToolbarModule, MdIconModule, MdButtonModule } from '@angular/material';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent,
    HeaderComponent,
    MainComponent,
    FooterComponent,
    SidebarComponent
  ],
  imports: [
    CoreModule,
    BrowserModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　3.6 效果圖如下