如何使 Clarity Tree View 中的树节点文本可点击？

Question

我使用 Clarity Framework（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>

它工作正常，但问题是我只能通过单击图标来展开文件夹。单击文件夹的标题文本不会展开 children。有什么方法可以使用 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>

如何使 Clarity Tree View 中的树节点文本可点击？

How can I make tree node text in the Clarity Tree View clickable?

angular

user-interface

vmware-clarity

clarity