Angular 角网格中嵌套导航结构的一种有效方法

假设我有以下树结构：

    Item1            Item2            Item3            Item4             Itemn  
  /   |   \        /   |   \        /   |   \        /   |   \         /   |   \
 /    |    \      /    |    \      /    |    \      /    |    \       /    |    \
 a    b    c      d    e    f      g    h     i     j    k     l     n-2   n-1   n

a，b，…，n

中的每个节点都有值。 构建此导航的更有效方法是什么

我的做法是：

创建一个包含布尔值的数组

toggleStatus

。 为每个选项卡分配一个编号，该编号分别等于

toggleStatus

的索引。 方法

toggle（index）

将在index

index

处切换

toggleStatus

的值

---

请看一下我的示例。

这里我有一些通过数组的示例代码 在你的口袋里

 toggleArray = [{ name:'Item 1',subItems: [{name:'a',msg:'this is a',isExpand:false},{name:'b',msg:'this is b',isExpand:false},{name:'c',msg:'this is c',isExpand:false}] ,isExpand : false},{ name:'Item 2',subItems: [{name:'d',msg:'this is d',isExpand:false},{name:'e',msg:'this is e',isExpand:false},{name:'f',msg:'this is f',isExpand:false}] ,isExpand : false}]
  toggleItem(item) {
    item.isExpand = item.isExpand ? false:true;
    item.subItems.forEach((item) => {
      item.isExpand = false;
    })
  }
  toggleSubItem(subitem) {
    subitem.isExpand = subitem.isExpand ? false:true;
  }

在你的HTML中。我只是把逻辑，请修复CSS任何你需要的

<div *ngFor="let item of toggleArray" (click)="toggleItem(item)" class="p-4 bg-blue-600 text-white hover:bg-blue-400 cursor-pointer text-center">
    {{item.name}}
     <div class="container mx-auto">
    <div *ngIf="item.isExpand" class="flex flex-row justify-between">
      <div *ngFor="let subitem of item.subItems" (click)="toggleSubItem(subitem)" class="py-3 w-1/3 text-center bg-blue-200">
        {{subitem.name}}
        <div class="container mx-auto">
          <div *ngIf="subitem.isExpand" class="flex flex-row justify-between">
            <div  (click)="toggleSubItem(subitem)" class="py-3 w-1/3 text-center bg-blue-200">
              {{subitem.msg}}
            </div>
           </div>
          </div>
      </div>
    </div>
  </div>
  </div>

{{item.name}
{{subitem.name}
{{subitem.msg}

您不需要将所有数据直接添加到HTML中。您只需创建一个对象数组，它将非常适合嵌套的

ngFor

案例

您的数据将如下所示

菜单：任意[]=[{
项目：“项目1”，子菜单：[
{item:'a'，info:'info of a'}，
{item:'b'，info:'info of b'}，
{item:'c'，info:'info of c'}
]
}, {
项目：“项目2”，子菜单：[
{item:'d'，info:'info of d'}，
{item:'e'，info:'info of e'}，
{item:'f'，info:'info of f'}
]
}, {
项目：“项目3”，子菜单：[
{item:'g'，info:'info of g'}，
{item:'h'，info:'info of h'}，
{item:'i'，info:'info of i'}
]
}, {
项目：“项目4”，子菜单：[
{item:'j'，info:'info of j'}，
{item:'k'，info:'info of k'}，
{item:'l'，info:'info of l'}
]
}];

然后在HTML中，我们将使用

ngFor

{{menu.item}
{{子菜单.item}
{{子菜单信息}

在您的组件中，我们将定义标志和

切换

函数。我使用了一个数组作为标志。我们将根据索引动态地将切换标志插入到该数组中。用于防止

单击

事件冒泡到父元素的

单击

事件中。下面是组件的外观

show子菜单：任意[]=[]；
showInfo:any[]=[]；
切换菜单（索引：编号）{
this.showSubmenu[index]=！this.showSubmenu[index]；
}
切换子菜单（事件：MouseEvent，项：string）{
event.stopPropagation（）；
this.showInfo[item]=！this.showInfo[item]；
}

注意：传递到

切换子菜单的
项应为唯一值。如果您有一个
id
，最好在此处使用它，而不是
项

这是一幅同样的作品。
真漂亮！如果我不仅想显示纯文本，还想显示html代码，我该如何处理？只需使用
[innerHTML]
来显示值即可。查看我的StackBlitz，我使用
innerHTML
更新了信息部分以显示数据，并修改了
菜单中的第一项，使其在子菜单的信息中包含HTML内容。