分层树视图在angular 8中使用Ul展开折叠

分层树视图在Angular 8中使用<ul>展开折叠的方法可以通过编写自定义指令和组件来实现。以下是一个示例：

首先，创建一个自定义指令来控制树节点的展开和折叠状态：

import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[treeExpand]'
})
export class TreeExpandDirective {
  @Input() treeExpand: boolean;
  @HostBinding('class.expanded') isExpanded = false;

  @HostListener('click', ['$event.target'])
  onClick(btn) {
    this.isExpanded = !this.isExpanded;
    btn.parentNode.querySelector('ul').classList.toggle('hidden');
  }
}

然后，在组件中使用该自定义指令来实现分层树视图：

<ul>
  <li *ngFor="let node of treeData">
    <span [treeExpand]="node.children.length > 0"></span>
    {{ node.name }}
    <ul class="hidden">
      <li *ngFor="let childNode of node.children">
        <span [treeExpand]="childNode.children.length > 0"></span>
        {{ childNode.name }}
        <!-- 可以继续嵌套子节点 -->
      </li>
    </ul>
  </li>
</ul>

这样，当点击展开/折叠按钮时，会触发自定义指令中的点击事件处理程序，根据节点的展开状态切换相关样式，并通过CSS控制子节点的显示和隐藏。

请注意，以上示例中只涉及到展开和折叠的功能，并没有涉及其他相关的功能，如节点的选中状态等。具体的实现可以根据实际需求进行扩展。

腾讯云提供了一系列的云计算产品，可以用于支持和扩展Angular应用的部署和运行。以下是一些相关的腾讯云产品和其介绍链接：