angular - 在 Angular 中创建动态级联菜单

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>

标签： angular

Answer 1

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

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

这仍然有一些我需要修复的css问题。