組件的角度4材料自定義顏色

Question

是否可以在Angular 4的材質組件中添加自定義（HEX）顏色？ 例如是這樣的：

<div *ngFor="let factor of factors"> 
    <button md-button color="factor.color">Button</button> 
</div> 

哪裏factor.color是字符串中的十六進制格式（例如「#CCC」）

Answer 1

您可以使用[style.color]屬性和有關轉換的一些有用的帖子六碼RGB：

DEMO

HTML：

<button mat-button [style.color]="hexToRgb(factor.color)">Click me</button> 

打字稿：

.... 

hexToRgb(hex) { 
    hex = hex.replace("#",''); 
    let arrBuff = new ArrayBuffer(4); 
    let vw = new DataView(arrBuff); 
    vw.setUint32(0,parseInt(hex, 16),false); 
    let arrByte = new Uint8Array(arrBuff); 

    return 'rgb(' + arrByte[1] + "," + arrByte[2] + "," + arrByte[3] +')'; 
}