Angular 如何使树视图中的树节点文本可单击？

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

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

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

{{item.title}

---

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

您可以使用

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>

{{item.title}