Treeview 从数据API动态创建递归树视图的最佳方法
我正在学习Angular 2,试图从一个(可能非常大的)第三方API构建一个可扩展的树视图。API的底层结构如下所示:Treeview 从数据API动态创建递归树视图的最佳方法,treeview,angular,angular2-services,Treeview,Angular,Angular2 Services,我正在学习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) -
- 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,它返回该节点的子节点(仅)的一个简单JSON数组。例如,我调用:http://www.example.com/api/contentNodes/?parentId=1053
并返回:
[
{"Id":1054,"Name":"Rugby League","HasChildren":true},
{"Id":1056,"Name":"Football","HasChildren":true}
]
(HasChildren
表示节点是否有子节点。)
注意,由于数据集最终会很大,我希望随着树状分支的打开,逐步从API中“拉入”更多数据,而不是将整个数据集转储到其中并在我的应用程序中呈现出来
我已经建立了一个Angular 2应用程序,可以在这里看到:
关键组件是“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);
}
}
从'angular2/core'导入{Component,OnInit};
从“./content node”导入{ContentNode};
从“/content.service”导入{ContentService};
@组成部分({
选择器:“内容列表”,
模板:`
但它似乎(a)有点问题(当子节点为空时,HTML中呈现空的
元素等);以及(b)它似乎是以一种非常“硬编码”的方式设置的,我没有足够的经验自信地重构它
非常感谢
注意,出于安全原因,我无法向公共请求打开API,不幸的是,这使得在Plunkr上测试有点困难,我意识到。目前,我的示例只使用一个静态的单级JSON数据集。在Angular2中,可以递归地呈现指令。这使得呈现树非常容易。
我对您的进行了一点修改,只是为了说明这一点。这不是理想的实现,但它的工作原理与预期相符:)
例如:
@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>;
}
@组件({
选择器:“树视图”,
模板:`
`,
指令:[树视图]
})
导出类树视图{
@输入()
私有目录:数组;
}
我希望你会喜欢它
干杯!太好了!谢谢。我很想知道理想的实现是什么,因为我的应用程序在很大程度上依赖于这种逻辑。如果您有时间,我将非常感谢您的解释,但无论如何感谢您提供的有效解决方案!:)将是使用changedetection解决的一个非常有趣的案例:)