从数据 API 动态创建递归树视图的最佳方法

Question

我正在学习 Angular 2，尝试从（可能非常大的）第三方构建一个可扩展的树视图 API。 API 的底层结构如下：

- Home (id: 1053)
- - Rugby League (id: 1054)
- - - Super League (id: 1103)
- - - - Castleford Tigers (id: 1111)
- - - - Catalans Dragons (id: 1110)
- - - - Huddersfield Giants (id: 1116)
- - - - Hull FC (id: 1108)
- - - Championship (id: 1104)
- - - - Batley Bulldogs (id: 1120)
- - - - Bradford Bulls (id: 1118)
- - - - Dewsbury Rams (id: 1124)
- - - - Featherstone Rovers (id: 1121)
- - Football (id: 1056)
- - - Premier League (id: 1057)
- - - - AFC Bournemouth (id: 1059)
- - - - etc
- - - - etc

API 的设置使得我传递一个 id，它 returns 一个简单的 JSON 子节点数组（仅）。因此，例如我调用：http://www.example.com/api/contentNodes/?parentId=1053 并且它 returns:

[
  {"Id":1054,"Name":"Rugby League","HasChildren":true},
  {"Id":1056,"Name":"Football","HasChildren":true}
]

(HasChildren表示该节点是否有子节点。)

注意，因为数据集最终会很大，所以我想 'pull in' 随着树枝的打开逐渐从 API 获取更多数据，而不是将整个数据集转储到在那里并在我的应用程序中呈现出来。

我已经设置了一个 Angular 2 应用程序，可以在这里看到：http://plnkr.co/edit/QQ1OKCbd4pDptpSVbWch?p=preview

关键组件是 `app/content-list.component.ts' 文件：

import {Component, OnInit}  from 'angular2/core';
import {ContentNode}        from './content-node';
import {ContentService}     from './content.service';

@Component({
    selector: 'content-list',
    template: `
        <ol class="tree">
            <li *ngFor="#contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}">
                <a *ngIf="contentNode.HasChildren" (click)="toggleBranch(contentNode.Id)" class="toggle">+</a> {{ contentNode.Name }}
            </li>
        </ol>
        <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
    `
})
export class ContentListComponent implements OnInit {

    constructor (private _contentService: ContentService) {}

    errorMessage: string;
    private _startNodeId: number = 1053;

    contentNodes: ContentNode[];

    ngOnInit() { 
        this.getContentNodes();
    }

    getContentNodes() {
        this._contentService.getContentNodes(this._startNodeId)
            .subscribe(
                contentNodes => this.contentNodes = contentNodes,
                error =>  this.errorMessage = <any>error
            );
    }

    toggleBranch(branchId:number){
        console.log('branchId: ' + branchId);
    }
}

你会在这里看到我正在调用我的服务 returns JSON 如上所述，传递的 parentId 为 1053。

我现在遇到了障碍，无法在单击 + 按钮时将树视图的子节点逐步加载到嵌套的 HTML 列表中（<ol> ).

这里最好的方法是什么，以非常巧妙的方式实现这一目标？

我的下一步将是确保该应用程序不会进行过多的 API 调用，但我最关心的只是让运行树视图连接起来并正常工作。

我见过 this example of a recursive treeview 但它似乎 (a) 有一点错误（当子节点为空时 HTML 中呈现空 <ol></ol> 元素等） ; (b) 它似乎是以一种非常 'hard-coded' 的方式设置的，我没有足够的经验来自信地重构它。

非常感谢。

请注意，出于安全原因，不幸的是我无法打开 API 到 public 请求，这使得在 Plunkr 上进行测试有点困难，我意识到。目前，我的示例仅使用静态的单级 JSON 数据集。

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

希望大家喜欢

干杯！

从数据 API 动态创建递归树视图的最佳方法

Best approach to create recursive treeview dynamically from data API

treeview

angular

angular2-services