角度 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 的有用帖子：

演示

.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] +')';
}