md-progress-circle angular2-material 的自定义颜色

Question

我尝试将 md-progress-circle 对象的颜色更改为自定义颜色。

<md-progress-circle mode="determinate"></md-progress-circle>

我该怎么办？没有 class 可以复制或覆盖。在 progress-circle.js 中，我找到了这一行：

styles: [
    ... 
    :host path { 
        fill: transparent; 
        stroke: #00897b; 

        /** Stroke width of 10px defines stroke as 10% of the viewBox */ 
        stroke-width: 10px; 
    } 
    ...
]

Answer 1

您可以尝试以这种方式覆盖样式：

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (parentAnnotation[key] !== undefined && parentAnnotation[key] !== null) {
        if(Array.isArray(parentAnnotation[key])) {
          annotation[key] = [...parentAnnotation[key], ...annotation[key]];
        } else {
          annotation[key] = parentAnnotation[key];
        }
      }
    });
    var metadata = new ComponentMetadata(annotation);
    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

@CustomComponent({
  styles: [`
     :host path { 
        stroke: red; 
    } 
  `]
})
export class CustomMdProgressCircle extends MdProgressCircle {
  constructor(_changeDetectorRef: ChangeDetectorRef) {
    super(_changeDetectorRef); 
  }
}

我创建了覆盖原点的自定义组件 CustomMdProgressCircle MdProgressCircle 然后你需要像这样使用它：

directives: [CustomMdProgressCircle]

这是一个 plunkr 示例 https://plnkr.co/edit/1sROtfRVOOfnpa5C9HFw?p=preview

希望对您有所帮助！

Answer 2

在 Angular 2（和 Material 2）中：因为它是一个 SVG 元素，你可以像这样重新定义它的 CSS 样式：

.mat-spinner path {
  stroke: #cccccc;
  stroke-width: 1px !important;
}

md-progress-circle angular2-material 的自定义颜色

custom color for md-progress-circle angular2-material

angular-material

angular