分层树视图在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>