角度材质2改变根后代复选框颜色

Question

我正在使用带有复选框的角度材料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'"