loading...

5.25这天PM抛来个需求...

因为项目的app用的UI框架是ionic V5，前端框架是angular，立马去ionic官网翻了一下，没找的到...

(左思右想...)

干脆自己写一个这样的组件吧，虽然第一次，但感觉应该不难...

然后就有下面的代码啦...

coding...

recursive-list.component.html

<div>
     <div *ngFor="let item of items" class="item">
          <div (click)="toggleItem(item)" class="title">
            <img class="toggle-icon" [src]="item.expanded ? 'assets/imgs/aramark/minus-svg.svg' : 'assets/imgs/aramark/plus.svg'" [alt]="item.expanded ? 'minus' : 'plus'">
            <img class="toggle-icon-pack" [src]="getIconPath(item)" [alt]="item.expanded ? 'icon1' : 'icon2'">
            {{ item.title }}
          </div>
          <div *ngIf="item.expanded">
            <app-recursive-list [items]="item.subItems"></app-recursive-list>
          </div>
       </div>
 </div> 

recursive-list.component.ts

    import { Component, Input } from '@angular/core';
    @Component({
      selector: 'app-recursive-list',
      templateUrl: './recursive-list.component.html',
      styleUrls: ['./recursive-list.component.scss']
    })
    export class RecursiveListComponent {
      @Input() items: any[];

      toggleItem(item: any) {
        if (item.subItems && item.subItems.length > 0) {
            item.expanded = !item.expanded;
        } else {
            item.expanded = true;
        }
      }
    getIconPath(item: any): string {
        if (item.subItems && item.subItems.length > 0) {
          // 顶层和中间层显示图标2
          return 'assets/imgs/aramark/wx-wenjianjia.svg';
        } else {
          // 最后一层显示图标1
          return 'assets/imgs/aramark/wx-fileEmpty.svg';
        }
      }
    }

recursive-list.component.css

/* recursive-list.component.css */

.item {
    margin-left: .625rem;  /* 设置缩进 */
}
  
.title {
    cursor: pointer;
    display: flex;
    height: 1.8625rem;
    align-items: center;
    width: 100%;
	background: #f9f9f9;
	border-radius: .25rem;
	margin-bottom: .625rem;
    padding-left: .5rem;
}
  
.toggle-icon {
    width: 1rem; 
    height: 1rem; 
    margin-right: .3125rem;
}

.toggle-icon-pack {
    width: 1rem;
    height: 1rem;
    margin-right: .3125rem;
}
  

组件调用的地方,记得将组建注入自己的模块

<div class="container">
    <app-recursive-list [items]="items"></app-recursive-list>
</div>

主要思想就是切套一个自己的组件

每个 item 对象都有一个 expanded 属性，用于表示该项的展开状态。当点击 title 元素时，通过调用 toggleItem(item) 方法，可以切换 item.expanded 属性的值，从而控制下方的嵌套内容的显示与隐藏。

使用 *ngIf="item.expanded" 来根据 item 的展开状态决定是否显示嵌套内容，当 item.expanded 为真时，嵌套内容将显示出来。

确保代码中实现 toggleItem(item) 方法，用于切换 item 对象的 expanded 属性值，以实现展开和收起的功能。

最后看一下效果图

Over!