p-树单击整个节点

Question

请任何人给我一个想法，如何修复 p-tree 组件，我可以单击整个节点，而不仅仅是切换图标。 我发现我可以通过单击来扩展根节点，如下所示：

@HostListener("click") onClick() {  this.usersService.treeData[0].expanded=true; 

但是如何定义用户单击了哪个子元素？

请指教... 附注Angular 14 PrimeNG。

我尝试使用样式来捕捉它，例如：

 const elements = this.elementRef.nativeElement.querySelectorAll("p-tree"); elements.forEach( (element: any) => { this.renderer.listen(element, "click", event => { console.log('CLICK', element.nativeElement.label);

但我无法定义单击了哪个子节点。

Answer 1

如果您想在单击节点本身时展开和折叠节点，您可以使用一个 CSS 技巧，即使切换按钮不可见并覆盖节点本身。

:host ::ng-deep .p-treenode-content {
  position: relative;
  height: 2rem;
}
:host ::ng-deep .p-tree-toggler {
  width: 100% !important;
  position: absolute !important;
  border-radius: unset !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

将其添加到组件的 css 文件中。

希望这个技巧对你有帮助。