以角度展开/折叠递归树菜单中的列表项

Question

如何实现嵌套列表在点击时展开？ 目前它只是打开第一层。

侧边栏组件.html

<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list" (click)="listClick($event, item)">
{{item.name}}
<ul *ngIf="item.folders?.length > 0" [ngClass]="{ 'subfolder': selectedItem == item }">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.folders }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

从侧边栏单击。

listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue;
}

第一级的工作方式是应该的。我单击文件夹名称，它就会展开。但是当我单击下一级的列表元素时，列表会折叠而不是进一步扩展。

Answer 1

我认为该事件正在冒泡到父元素，即当您单击子元素时，您也单击了父元素。添加event.stopPropagation()应该会阻止事件冒泡到父级。即

listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue;
event.stopPropagation();
}

更新：我不确定您的数据是如何获取的，所以我不确定这是否 100% 正确。但这里有一个工作示例，说明它应该如何工作(你确实需要event.stopPropagation();)，我已经&& item.showSubfolders点击时切换的*ngIf中添加了：

<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list" (click)="listClick($event, item)">
{{item.name}}
<ul *ngIf="item.folders?.length > 0 && item.showSubfolders" [ngClass]="{ 'subfolder': selectedItem == item }">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.folders }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

和列表点击：

listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue;
newValue.showSubfolders = !newValue.showSubfolders
event.stopPropagation()
}

工作示例：https://stackblitz.com/edit/angular-emz37r