二話不說(shuō)，先上gif圖：

上png，下svg

綁定點(diǎn)擊事件 (click)="事件名()"
綁定src="{{變量名}}"
DOM元素獲?。篤iewChild, ElementRef, AfterViewInit;

ViewChild 是屬性裝飾器，用來(lái)從模板視圖中獲取匹配的元素。視圖查詢?cè)?ngAfterViewInit 鉤子函數(shù)調(diào)用前完成，因此在 ngAfterViewInit 鉤子函數(shù)中，才能正確獲取查詢的元素。

一、通過(guò)img的src實(shí)現(xiàn)圖片顏色切換

• 綁定src :src="{{pngUrl}}"
• 奇偶次切換，原理類似toggle

  <ul>
    <li>
//添加按鈕點(diǎn)擊事件pngChange
      <button type="button" name="button" (click)="pngChange()">藍(lán)色png，點(diǎn)擊變成綠色</button>
      <img width="40" alt="Angular Logo" src="{{pngUrl}}" #png class="png">
    </li>
</ul>

//DOM元素獲取的話需要import ViewChild, ElementRef, AfterViewInit;
import { Component,ViewChild,ElementRef, AfterViewInit } from '@angular/core';

export class AppComponent  {
  @ViewChild('png') png:ElementRef; //獲取到該元素

  public pngUrl = "../assets/blue.png"; //定義src的綁定變量
  public count1 = 0; //用以判斷點(diǎn)擊的奇偶次


 //點(diǎn)擊改變png圖片顏色，奇數(shù)綠色，偶數(shù)藍(lán)色，類似toggle
  pngChange(){
  this.count1 ++;
  if(this.count1 %2 ==1) {
    console.log(11);
    this.pngUrl="../assets/green.png";
    }else {
    this.pngUrl="../assets/blue.png";
          }
  }

//必須要寫的
ngAfterViewInit() {
     // console.log(222);
   }
}

二、<svg>直接嵌在html頁(yè)面中

<ul>
  <li>
    <button type="button" name="button" (click)="svgChange()">粉色svg，點(diǎn)擊點(diǎn)擊變成橙色</button>

 //path是矢量路徑，這個(gè)有專門的svg編輯器生成這些代碼，不用管～
       <svg  viewBox="0 0 1024 1024"  width="40" height="40" class="svg" #svg>
      <path d="M768 728.615385v-7.876923-11.815385c-11.815385-110.276923-122.092308-196.923077-256-196.923077s-244.184615 86.646154-256 192.984615v23.63077c0 43.323077 35.446154 78.769231 78.769231 78.76923h354.461538c43.323077 0 78.769231-35.446154 78.769231-78.76923zM512 1024C228.430769 1024 0 795.569231 0 512S228.430769 0 512 0s512 228.430769 512 512-228.430769 512-512 512z m0-555.323077c94.523077 0 169.353846-74.830769 169.353846-169.353846S606.523077 126.030769 512 126.030769s-169.353846 78.769231-169.353846 173.292308 74.830769 169.353846 169.353846 169.353846z" #path fill="#d4237a"></path>
    </svg>
  </li>
</ul>

//導(dǎo)包
import { Component,ViewChild,ElementRef, AfterViewInit } from '@angular/core';
//元素獲取 svg或者這個(gè)path它倆任意一個(gè)都能改變顏色，就是在事件觸發(fā)時(shí)找到nodeValue會(huì)有點(diǎn)差別～
@ViewChild('svg') svg:ElementRef;
@ViewChild('path') path:ElementRef;
//用以判斷奇偶次
public count2 = 0;
//事件觸發(fā)
  svgChange(){
    this.count2++;
    if(this.count2 % 2== 1) {
//針對(duì)svg的元素進(jìn)行變色屬性獲取操作，一般選這種方案，
  this.svg.nativeElement.firstChild.attributes[2].nodeValue="orange";
//這是對(duì)<path>標(biāo)簽的DOM獲取后的顏色操作
 // this.path.nativeElement.farthestViewportElement.firstChild.attributes.fill.nodeValue="orange";
    } else {      
  this.svg.nativeElement.firstChild.attributes[2].nodeValue="#d4237a";
// this.path.nativeElement.farthestViewportElement.firstChild.attributes.fill.nodeValue="#d4237a";
    }
  }

• svg的屬性列表

  
  
  svg

this.svg.nativeElement.firstChild.attributes[2].nodeValue="你想要的顏色值"

• path的屬性列表

  
  
  this.path.nativeElement.farthestViewportElement.firstChild.attributes.fill.nodeValue="你想要的顏色值"

其實(shí)都大同小異，獲取DOM以后console一下，控制臺(tái)里找一找，基本上關(guān)于屬性的改變大都記錄在attributes這一個(gè)關(guān)鍵key中～～

大愛(ài)svg，因?yàn)槭鞘噶繄D，一直保持清晰。咱們常用到的iconfont字體圖標(biāo)，就是svg～svg不僅可以直接通過(guò)img的src引入，也可以把<svg>整個(gè)標(biāo)簽復(fù)制到html頁(yè)面中也沒(méi)有問(wèn)題～