angular - 如何使清晰树视图中的树节点文本可点击？

Question

我使用 Clarity 框架（clr-tree 元素）生成了以下树结构。

这是我为在视图中生成它而编写的代码：

<clr-tree>
  <clr-tree-node
    *clrRecursiveFor="let item of list; getChildren: getChildren"
    (click)="onSelect(item)"
    [class.m-selected]="selected && item.slug === selected.slug"
    > {{item.title}}
  </clr-tree-node>
</clr-tree>

它工作正常，但问题是我只能通过单击图标来展开文件夹。单击文件夹的标题文本不会展开子项。有没有办法使用 Clarity 框架来实现这种行为？

Answer 1

您可以使用绑定到展开状态clrExpanded并绑定一个属性来确定节点是否应该展开。然后使用您的点击处理程序，您可以以编程方式切换该状态。

<clr-tree>
  <clr-tree-node
    *clrRecursiveFor="let item of list; getChildren: getChildren"
    (click)="onSelect(item) && item.expanded = !item.expanded"
    [(clrExpanded)]="item.expanded"
    [class.m-selected]="selected && item.slug === selected.slug"
    > {{item.title}}
  </clr-tree-node>
</clr-tree>