javascript - 如何在 Angular 2 中展开/折叠递归 TreeView ？

Question

我正在尝试从这个 AngularJS 1 demo 重现展开/折叠功能进入我的 Angular 2 应用程序(我使用的是递归 View )，但我的尝试总是导致扩展超过 1 个节点。

如何在 Angular 2 中实现适当的展开/折叠功能？

这是我当前的代码:

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

@Component ({
    selector: 'tree-view',
    template: `
    <ul>
        <li *ngFor="let node of treeData">
            <span *ngIf="node.children?.length" (click)="toggleChildren()">[+]</span>
            {{node.name}}
            <tree-view [treeData]="node.children"></tree-view>
        </li>
    </ul>
    `
})
export class TreeView {
    @Input() treeData: any[];

    toggleChildren() {
      // to do
    }
}

这是一个包含所有内容的 Plunker:http://plnkr.co/edit/KmLDb1ba3WYp3X6snnmg?p=preview

Answer 1

向节点添加属性以检查它们是否可见。如果是，则显示它们，如果不是，则隐藏它们。

这是一个关于如何实现它的简单示例。当节点可见时，您可能希望通过将图标 [+] 更改为 [-] 来改进它。

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

@Component ({
    selector: 'tree-view',
    template: `
    <ul>
        <li *ngFor="let node of treeData">
            <span *ngIf="node.children?.length" (click)="toggleChildren(node)">[+]</span>
            {{node.name}}
            <tree-view [treeData]="node.children" *ngIf="node.visible"></tree-view>
        </li>
    </ul>
    `
})
export class TreeView {
    @Input() treeData: any[];


    toggleChildren(node: any) {
      // to do
      node.visible = !node.visible;

    }
}