TreeView с плоской <li>структурой - PullRequest
Новая
       7

TreeView с плоской <li>структурой

0 голосов
/ 27 июня 2018

Я создаю повторно используемый компонент TreeView в AngularJS, который принимает следующий объект в качестве ввода, 

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

И для этого следует отобразить TreeView. По ряду причин я хочу, чтобы сгенерированная структура HTML была сделана из плоской 'li'

* 1006 Е.Г. * 

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

Другие требования:

  • Нет программного выравнивания структуры. Это должно быть просто умная директива.
  • Должен пройти любой уровень глубоко

Вот jsFiddle для игры. Пока что я могу сделать только первый уровень. Спасибо!

1 Ответ

0 голосов
/ 27 июня 2018

в 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>;
}
...