Angular

Question

我正在创建一个树形菜单，视觉上看起来像这样：

树是基于从服务中获取的对象数组创建的，从日期属性中提取。

现在，我必须获取树形菜单以允许显示和折叠：年份、月份和完整日期，采用此组件的样式： https://angular2-tree.readme.io/

理想情况下，我会使用打字稿来完成此操作，但如果这对我来说很难，我会尝试使用外部组件。

这是html代码：

<ul>
        <li *ngFor="let y of tree | keyvalue">{{y.key}}
            <ul>
                <li *ngFor="let m of tree[y.key] | keyvalue">{{m.key}}
                    <ul>
                        <li *ngFor="let d of tree[y.key][m.key] | keyvalue">{{d.key}}
                            <ul>
                                <li *ngFor="let h of tree[y.key][m.key][d.key]"><a [ngClass]="{'hourSelected': (idSchedule === h.id || lastId === h.id),'hourUnSelected': idSchedule !== h.id}" (click)="loadMacroProcesses(h.id)">{{h.hour}}</a></li>
                            </ul>    
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

这就是解决方案，现在我将改进它：

    <ul>
        <li id="year" *ngFor="let y of tree | keyvalue; let i=index" (click)="listClick($event, i)">{{y.key}}
            <ul [hidden]="indexExpandedYear!=i?true:null">
                <li id="month" *ngFor="let m of tree[y.key] | keyvalue; let j=index" (click)="listClick($event, j)">{{m.key}}
                    <ul [hidden]="indexExpandedMonth!=j?true:null">
                        <li id="day" *ngFor="let d of tree[y.key][m.key] | keyvalue; let k=index" (click)="listClick($event, k)">{{d.key}}
                            <ul [hidden]="indexExpandedDay!=k?true:null">
                                <li *ngFor="let h of tree[y.key][m.key][d.key]"><a [ngClass]="{'hourSelected': (idSchedule === h.id || lastId === h.id),'hourUnSelected': idSchedule !== h.id && lastId !== h.id}" (click)="loadMacroProcesses(h.id)">{{h.hour}}</a></li>
                            </ul>    
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

这是打字稿方法：

 listClick(event, i) {
        switch (event.srcElement.id) {
                case "year":
                    this.indexExpandedYear = this.indexExpandedYear==i?-1:i;
                    event.stopPropagation();
                break;
                case "month":
                    this.indexExpandedMonth = this.indexExpandedMonth==i?-1:i;
                    event.stopPropagation();
                break;  
                case "day":
                    this.indexExpandedDay = this.indexExpandedDay==i?-1:i;
                    event.stopPropagation();
                break;       
            default:
                break;
        }
    }

能给我推荐一个好的外接元件吗？谢谢。

注意：我正在使用 Angular

的第 11 版

注意：如果部署一年，则应将其余年份倒回去。

注意：Angular material 对我无效

Answer 1

您可以为父 ul 添加可见性和点击事件参数。它的工作原理是，当您单击顶部的 ul 元素时，它们的可见性会发生变化的布尔值。您将拥有一种方法，该方法只会在 true/false 之间切换，如果为真则显示如果为假则隐藏。点击事件应该发生在顶部的 li 元素上，可见性发生在它的子元素上。

Answer 2

你应该看看primeng提供的树组件。它有自己的数据格式，可以在其上进行自定义。

Angular - 创建组件树菜单

Angular - Create component tree menu

javascript

treeview

tree

typescript