Question

我正在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一起玩。到目前为止，我只能渲染第一级。谢谢！

Answer 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>;
}

扁平<li>结构的TreeView

1 个答案: