在Angular 2中展开/折叠递归树形视图可以通过使用递归组件和模板来实现。以下是一个示例的步骤:
import { Component, Input } from '@angular/core';
@Component({
selector: 'tree-node',
template: `
<div>
<span (click)="toggle()">{{ node.name }}</span>
<div *ngIf="expanded">
<tree-node *ngFor="let childNode of node.children" [node]="childNode"></tree-node>
</div>
</div>
`,
})
export class TreeNodeComponent {
@Input() node: any;
expanded: boolean = false;
toggle() {
this.expanded = !this.expanded;
}
}
*ngFor
指令来遍历根节点,并将每个节点传递给递归组件。import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<div>
<tree-node *ngFor="let rootNode of treeData" [node]="rootNode"></tree-node>
</div>
`,
})
export class AppComponent {
treeData = [
{
name: 'Node 1',
children: [
{
name: 'Node 1.1',
children: [
{
name: 'Node 1.1.1',
children: []
}
]
},
{
name: 'Node 1.2',
children: []
}
]
},
{
name: 'Node 2',
children: []
}
];
}
在上述示例中,treeData
是一个包含树形结构数据的数组。每个节点都有一个name
属性和一个children
属性,children
属性是一个包含子节点的数组。
*ngIf
指令来判断是否展开子节点。点击节点名称时,调用toggle()
方法来切换展开/折叠状态。这样,当你在Angular 2中使用以上的递归组件和模板时,就可以展开/折叠递归树形视图了。
请注意,以上示例中的代码仅用于演示目的,实际应用中可能需要根据具体需求进行修改和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云