如何在 Angular 2 中展开/折叠递归树视图？

Question

我正在尝试将此 AngularJS 1 demo 中的展开/折叠功能复制到我的 Angular 2 应用程序中（我正在使用递归视图），但我的尝试总是导致展开超过 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;

    }
}