Angular - 创建组件树菜单

Question

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

已经根据从日期属性提取的服务中获得的一组对象创建了树。

现在，我必须获取树菜单，以显示和折叠以下：年，几个月和完整的日期，以此组件的方式： https://angular2-tree.readme.io/

理想情况下，我会用typescript做到这一点，但是如果我很难，我会​​尝试使用外部组件。

这是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

Note的第11版：如果您部署了一年，则其余的年份应倒流。

注意：角材料对我无效

Answer 1

您可以添加一个参数以供可见性，然后单击事件到父级UL。它的工作方式是，他们将对它们具有布尔值，以使其可见性，当您单击顶部UL元素时会改变。您将拥有一种方法，该方法只能在true/false之间切换，如果false隐藏，则可以在true/false之间进行切换。点击事件应放在最高的LI元素上，并在其孩子身上可见性。

Answer 2

您应该检查Primeng提供的树成分。它具有自己的数据格式，可以在其上进行自己的自定义。