Question

我创建了一个具有三个级别的动态菜单

我希望此菜单以级联方式工作，但是不幸的是，当我单击菜单时，所有菜单都打开了。同样，当我单击菜单时，所有级别一起打开

请帮助我

  showitems=false;

   fullMenu = [
    {name:"Home",childs:[
       {name:"HomeLevel-1",childs:[
         {name:"Home-level-2"}
        ]}
     ]},
    { name:"about",},
    {name:"register",childs:[
      {name:"registerLevel-1",childs:[
       {name:"registerLevel-2"}
      ]}
    ]},
  ]

  constructor() { }
  ngOnInit() {

  }
  showSubMenu(){
    let menu = this.fullMenu;
    menu.forEach(data => {
      if (data.childs) {
        this.showitems = !this.showitems;
      }
    });
  }

<ul>
    <li class="item" (click)="showSubMenu()" *ngFor="let menu of fullMenu" >
        {{ menu.name }}
                <ul *ngIf="menu.childs ? showitems : '' ">
                    <li class="item" *ngFor="let submenu of menu.childs">
                        {{ submenu.name }}
                        <ul *ngIf="submenu.childs">
                            <li  class="item" *ngFor="let submenu_2 of submenu.childs">
                                {{ submenu_2.name }}
                            </li>
                        </ul>
                    </li>
                </ul>
    </li>
</ul>

Answer 1

这是利用引导程序的解决方案。这里的窍门是递归模板。利用递归允许每个“节点”独立扩展/折叠。

[attr.data-target]和[attr.id]用于动态创建id，这是引导程序实用程序确定要触发的元素的原因。

我使用引导4.4.1来运行它。希望能帮助到你！

fullMenu = [{
    name: "Home",
    childs: [{
      name: "HomeLevel-1",
      childs: [{
        name: "Home-level-2"
      }]
    }]
  },
  {
    name: "about"
  },
  {
    name: "register",
    childs: [{
      name: "registerLevel-1",
      childs: [{
        name: "registerLevel-2"
      }]
    }]
  }
];


<ul>
  <ng-template #recursiveList let-fullMenu let-level="level">
    <li *ngFor="let item of fullMenu; let i = index">
      <button class="btn btn-primary" type="button" data-toggle="collapse" [attr.data-target]="'#foo' + i + level" aria-expanded="false" aria-controls="collapseExample">
        {{item.name}}
      </button> {{i }}


      <ul *ngIf="item.childs && item.childs.length > 0">

        <div class="collapse" [attr.id]="'foo' + i +level">
          <div class="card card-body">
            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.childs, level: level + i + fullMenu.length }"></ng-container>
          </div>
        </div>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: fullMenu, level: 0 }"></ng-container>
</ul>

Answer 2

尽管我在Stackoverflow的帮助下找到了答案，但我也试图做同样的事情并遇到一些问题。请检查是否对您有帮助。这是一种可重用的组件

https://stackblitz.com/edit/angular-v6zee7

这仍然有一些CSS问题，我需要修复。

在Angular中创建动态级联菜单

2 个答案: