下面是一个示例的Angular 8代码,用于实现动态展开和折叠递归的层次列表:
hierarchical-list.component.ts
。import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hierarchical-list',
templateUrl: './hierarchical-list.component.html',
styleUrls: ['./hierarchical-list.component.css']
})
export class HierarchicalListComponent {
@Input() items: any[];
toggleItem(item: any) {
item.showChildren = !item.showChildren;
}
}
hierarchical-list.component.html
中,使用ng-container
和递归方式来实现层次列表的动态展开和折叠。
-
{{ item.name }}
hierarchical-list.component.css
中添加样式。ul {
list-style-type: none;
padding-left: 20px;
}
li {
cursor: pointer;
margin-bottom: 5px;
}
li span {
font-weight: bold;
}
ul ul {
margin-top: 5px;
}
HierarchicalListComponent
组件,并传入层次列表的数据。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
层次列表
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
data = [
{
name: 'Item 1',
children: [
{
name: 'Item 1.1',
children: [
{
name: 'Item 1.1.1',
children: []
},
{
name: 'Item 1.1.2',
children: []
}
]
},
{
name: 'Item 1.2',
children: []
}
]
},
{
name: 'Item 2',
children: [
{
name: 'Item 2.1',
children: []
}
]
}
];
}
这样,就可以实现一个动态展开和折叠递归的层次列表。