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

【问题标题】：How can I make tree node text in the Clarity Tree View clickable?如何使清晰树视图中的树节点文本可点击？
【发布时间】：2019-04-17 08:18:24
【问题描述】：

我使用 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 框架来实现这样的行为？

【问题讨论】：

标签： angular user-interface vmware-clarity clarity

【解决方案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>

【讨论】：