angular树-----Angular Tree

美丽心情0902
  • 206
回复
阅读 5.9k
5 个回答
老咸鱼
  • 271

这个东西我正在用 左侧导航树 <tree-control></tree-control> 有什么问题可以问我

丁丁_57b2f4c1a2689
  • 21

我正在用这个angular-ui-tree
你也可以选择用ztree,功能更强大,不过是基于jq的
能参考下类似文章,组件一下啦zTree在Angular中的使用

harlan
  • 131

只有组件不太好使吧,菜单树肯定是需要循环递归出来的,给你一个demo

<ul nz-menu [nzMode]="mode ? 'vertical': 'inline'" [nzTheme]="dark ? 'dark': 'light'" [nzInlineCollapsed]="isCollapsed" *ngFor="let side of sider">
  <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? side.text : ''">
          <span title>
            <i nz-icon [type]="side.icon"></i>
            <span>{{side.text}}</span>
          </span>
  </li>

  <child-sider *ngIf="side.children" [sider]="side.children"></yz-child-sider>
</ul>
<ng-container *ngFor="let side of sider">
  <ng-container *ngIf="side.children.length > 0">
    <li nz-submenu>
          <span title>
            <i nz-icon [type]="side.icon"></i>
            <span>{{side.text}}</span>
          </span>
      <ul>
      <!-- 自己调自己 -->
        <child-sider [sider]="side.children"></yz-child-sider>
      </ul>
    </li>
  </ng-container>

  <ng-container *ngIf="side.children.length === 0">
    <li nz-menu-item>
          <span title>
            <i nz-icon [type]="side.icon"></i>
            <span>{{side.text}}</span>
          </span>
    </li>
  </ng-container>

</ng-container>
宣传栏