具有扁平 <li> 结构的 TreeView答案

【问题标题】：TreeView with flat <li> structure具有扁平 <li> 结构的 TreeView
【发布时间】：2018-06-27 06:28:50
【问题描述】：

我正在 AngularJS 中创建一个可重用的 TreeView 组件，该组件将以下对象作为输入，

[
    {
        label: "1",
        children: [{
                label: "1.1",
                children: [{
                    label: "1.1.1",
                }]
            },
            {
                label: "1.2",
            }
        ]
    },
    {
        label: "2
    }
]

并且应该为此渲染一个 TreeView。出于多种原因，我希望生成的 HTML 结构由平面“li”组成

例如

<ul>
    <li> 1 </li>
    <li> 1.1 </li>
    <li> 1.1.1 </li>
    <li> 1.2 </li>
    <li> 2 </li>
</ul>

其他要求：

没有程序化的结构扁平化。它应该只是一个聪明的指令。
应该深入到任何级别

这是jsFiddle 玩。到目前为止，我只能渲染第一级。谢谢！

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

在 Angular2 中，您可以递归地渲染指令。这使得渲染树变得非常容易。我已经修改了你的Plunker 一点点只是为了说明这一点。这不是理想的实现，但可以按预期工作:)。

例子：

 @Component({
    selector: 'tree-view',
    template: '
        <div *ngFor="#dir of dirs">
            <tree-view [dirs]="dir.dirs"></tree-view>
        <div>
    ',
    directives: [TreeView]
})
export class TreeView {
    @Input() 
    private dirs: Array<Directory>;
}

【讨论】：