Angular material 2 更改根后代复选框颜色

Question

我正在使用 angular material 2 带有复选框的树，我想动态更改复选框颜色。简单的方法是点击它（（更改）事件被触发）并更改 MatCheckboxChange.source.color。问题是，当我单击根节点时，有什么方法可以获取所有后代复选框源（更改所有后代的颜色）？示例 here

模板

<mat-checkbox class="checklist-leaf-node"
              [checked]="checklistSelection.isSelected(node)"
              (change)="todoLeafItemSelectionToggle(node, $event)">{{node.item}}</mat-checkbox>

代码

todoLeafItemSelectionToggle(node: TodoItemFlatNode, event: MatCheckboxChange): void {
    event.source.color = 'warn'; // <---

    this.checklistSelection.toggle(node);
    this.checkAllParentsSelection(node);
  }

Answer 1

向模板添加颜色变量

<mat-checkbox class="checklist-leaf-node"
          [checked]="checklistSelection.isSelected(node)"
          [color]="color"
          (change)="todoLeafItemSelectionToggle(node, $event)">{{node.item}}</mat-checkbox>

然后在你的 javascript

this.color = 'primary';
this.color = 'accent';
this.color = 'warn';

编辑：

动态颜色 [color]="checklistSelection.isSelected(getParentNode(node)) ? 'primary' : 'warn'"

Angular material 2 更改根后代复选框颜色

Angular material 2 change root descendants checkbox color

angular-material2

angular