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'"