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

Posted 2021-03-30

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

sidebar.component.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>

单击sidebar.component.ts

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

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

答案

我认为事件正在冒泡到父母，即当你点击一个孩子时，你也点击了父元素。添加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：

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

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