如何在角度4中为树组件提供功能

Question

我正在以角度4创建树组件。我已经编写了类型脚本代码，但发现很难调用它。

任何人都可以建议或提供代码（不是来自第三方）吗？我是否需要修改此打字稿代码以提供树组件功能？

以下代码包含三个类：节点，树和树组件。我在app.module.ts文件中提供了声明。

tree.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  inputs: ['item'],
  selector: 'node',
  template: `
    <li>
      <a class="iconButton" (click)="toggle()"> <i class="material-icons">Add</i>{{ item.label }}, {{ IsExpanded }}</a>
      <div *ngIf="IsExpanded">
        <ul *ngIf="item.subs">
          <ng-template *ngFor="let subitem of item.subs">
            <node [item]="subitem"></node>
          </ng-template>
        </ul>
      </div>
    </li>
  `
})
export class Node implements OnInit {
  @Input() item: any;
  IsExpanded: boolean = false;
  ngOnInit() {
    console.log(this.item);
  }
  toggle() {
    this.IsExpanded = !this.IsExpanded;
    console.log(this.IsExpanded + ' ' + this.item.label);
  }
}

@Component({
  selector: 'tree',
  template: `
    <ul><h3>inside tree</h3>
      <ng-template *ngFor="let item of data">
        <node [item]="item"></node>
      </ng-template>
    </ul>
  `
})
export class Tree {
  @Input() data: any[];
}

@Component({
  inputs: ['data'],
  selector: 'app-tree-view',
  template: '<h3>Tree component</h3><tree [data]="data"></tree>'
})
export class TreeComponent implements OnInit{
  data: any;

  constructor() { }

  ngOnInit() {
    this.data= [
        {
            label: 'a1',
            subs: [
                {
                    label: 'a11',
                    subs: [
                        {
                            label: 'a111',
                            subs: [
                                {
                                    label: 'a1111'
                                },
                                {
                                    label: 'a1112'
                                }
                            ]
                        },
                        {
                            label: 'a112'
                        }
                    ]
                },
                {
                    label: 'a12',
                }
            ]
        },
        {
            label: 'b1',
            subs: [
                {
                    label: 'b11',
                },
                {
                    label: 'b12',
                }
            ]
        }
    ];
}
}

Answer 1

我在HTML文件中使用了ngTemplateOutlet。它只是简单地创建树视图，但您可以根据需要扩展功能。 这是plnkr链接： https://plnkr.co/edit/fGH9mI

 <ng-template #sectionTemplate let-Custnode>
                    <ul class="sub-ul-li">
                        <li>
                            <a href="#">
                                <span class="left-main-text">{{Custnode.name}}</span>
                                <span class="right-main-text">5%</span>
                            </a>
                        </li>
                        <ng-container *ngIf="Custnode.children.length>0">
                            <ng-container *ngFor="let s of Custnode.children">
                                <ng-container *ngTemplateOutlet="sectionTemplate; context: { $implicit: s }">
                                </ng-container>
                            </ng-container>
                        </ng-container>
                    </ul>
           </ng-template>
<!-- Section Template End  -->
                
                
          <ng-container *ngFor="let lession of lessons">
           <ul>
            <li>
                <a href="#">
                    <span class="left-main-text">{{lession.name}}</span>
                    <span class="right-main-text">5%</span>
                </a>
            </li>
            <ng-container *ngIf="lession.children.length>0">
                <ng-container *ngFor="let ss of lession.children">
                    <ng-container *ngTemplateOutlet="sectionTemplate; context: { $implicit: ss }">
                    </ng-container>
                </ng-container>
              </ng-container>
           </ul>
        </ng-container>

ul.sub-ul-li > li{ border-top: 1px solid #ccc; color: #1160B7; list-style: none; font-size: 14px;
 padding: 8px 10px; list-style: none;
    line-height: 18px; padding-left: 55px;}
    
ul.sub-ul-li > li .right-main-text{ color: #822e2d; float: right;}

 lessons = [{'name':'Lesson 1', 'children':[{'name':'Lesson 1.1', 'children':[{'name':'Lesson 1.2', 'children':[]}]}]}, {'name':'Lesson 2', 'children':[{'name':'Lesson 2.1', 'children':[]}]}, {'name':'Lesson 3', 'children':[{'name':'Lesson 3.1', 'children':[]}]}, {'name':'Lesson 4', 'children':[{'name':'Lesson 4.1', 'children':[]}, {'name':'Lesson 4.2', 'children':[]}, {'name':'Lesson 4.3', 'children':[]}, {'name':'Lesson 4.4', 'children':[]}]}, {'name':'Lesson 5', 'children':[]},{'name':'Lesson 6', 'children':[{'name':'Lesson 6.1', 'children':[{'name':'Lesson 6.2', 'children':[]}]}]}, {'name':'Lesson 7', 'children':[]}];