Question

我需要创建递归菜单，其中数据来自JSON，其结构如下：

 this.menus = [{
        "id": 1,
        "title": "Azure",
        "class": "fa-cloud",
        "url": "#",
        "menu": [{
          "id": 121,
          "title": "Azure AD",
          "class": "fa-cloud",
          "url": "#",
          "menu": [{
            "id": 1210,
            "title": "Settings",
            "class": "fa-cloud",
            "url": "#",
            "menu": [{
              "id": 1210,
              "title": "Apps",
              "class": "fa-cloud",
              "url": "#",
              "menu": [{
                "id": 2210,
                "title": "Apps2",
                "class": "fa-cloud",
                "url": "#",
              }]
            }, {
              "id": 1211,
              "title": "Users",
              "class": "fa-cloud",
              "url": "#"
            }]
          }]
        }]
      }, {
        "id": 2,
        "title": "AWS",
        "class": "fa-cloud",
        "url": "#",
        "menu": [{
          "id": 21,
          "title": "DMS",
          "class": "fa-cloud",
          "url": "#",
          "menu": [{
            "id": 211,
            "title": "End Points",
            "class": "fa-cloud",
            "url": "#"
          }, {
            "id": 2112,
            "title": "Replication",
            "class": "fa-cloud",
            "url": "#"
          },
          {
            "id": 2112,
            "title": "Replication3",
            "class": "fa-cloud",
            "url": "#"
          },
          {
            "id": 2112,
            "title": "Replication4",
            "class": "fa-cloud",
            "url": "#"
          },
          {
            "id": 2112,
            "title": "Replication5",
            "class": "fa-cloud",
            "url": "#"
          }]
        }]
      },
      {"id": 2,
    "title": "AWS2",
    "class": "fa-cloud",
    "url": "#",
    "menu": [{
            "id": 211,
            "title": "rr1",
            "class": "fa-cloud",
            "url": "#"
          }, {
            "id": 2112,
            "title": "rr2",
            "class": "fa-cloud",
            "url": "#"
          }]
      },
      {"id": 2,
      "title": "AWS3",
      "class": "fa-cloud",
      "url": "#",
      "menu": [{
              "id": 211,
              "title": "aws3-rr1",
              "class": "fa-cloud",
              "url": "#"
            }, {
              "id": 2112,
              "title": "aws3-rr2",
              "class": "fa-cloud",
              "url": "#"
            }]
        },
        {"id": 2,
        "title": "AWS4",
        "class": "fa-cloud",
        "url": "#",
        "menu": [{
                "id": 211,
                "title": "AWS4-rr1",
                "class": "fa-cloud",
                "url": "#"
              }, {
                "id": 2112,
                "title": "AWS4-rr2",
                "class": "fa-cloud",
                "url": "#"
              }]
          },
          {"id": 2,
        "title": "AWS5",
        "class": "fa-cloud",
        "url": "#",
        "menu": [{
                "id": 211,
                "title": "AWS5-rr1",
                "class": "fa-cloud",
                "url": "#"
              }, {
                "id": 2112,
                "title": "AWS5-rr2",
                "class": "fa-cloud",
                "url": "#"
              }]
          }
        ];

可以有n个子节点或子菜单值，在单击父菜单时应该可以看到这些子节点或子菜单值，但是此子菜单节点应位于4个菜单项之后。因此，如果我有以下菜单：“ A”，“ B”，“ C”，“ D”，“ E”，“ F”，“ G”，“ H”-如果我单击“ A”，则子菜单A1应该位于第一行“ A”，“ B”，“ C”，“ D”和第二行“ E”，“ F”，“ G”，“ H”之间。我可以将json分别集群为4毫秒，但问题是我只能在其父菜单内显示子菜单结果-因此，“ A1”子菜单显示在“ A”内，“ B1”子菜单显示在“ B”内。这是因为我的ng-template仅在ngFor的div内被识别，而不是取消它。

HTML：


<ng-template #recursiveMenu let-menu_copy>
    <div *ngFor="let t of temp(math.ceil(menu_copy.length/4)).fill(); let i = index" class="col-md-12 dd">
  <div *ngFor="let menu of menu_copy.slice(4*i,4*i + 4); let i = index" class="dropdown-toggle" data-toggle="collapse" >
     <a  title="{{menu.title}}" (click)="getMenuVal(menu,i,$event); menu.selected = !menu.selected;"
      data-target="#nav{{menu.id}}" >
      <i class="fa fa-fw fa-2x {{menu.class}}"></i> <span class="nav-header-primary">{{menu.title}}</span> &nbsp;                
      <span *ngIf="menu.menu" class="fa fa-caret-down fa-2x pull-right">                
      </span>  
    </a> 
    <ng-template #rSubMenu let-menu.menu>
    <ul class="nav collapse" style="margin-left:20px" *ngIf="menu.menu" id="nav{{menu.id}}" [ngClass]="{'in':menu.selected}">               
        <ng-container  *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu.menu }"></ng-container>
    </ul>  </ng-template>
  <ng-container *ngTemplateOutlet="rSubMenu; context:{$implicit:menu_copy}" ></ng-container> </div>
  <div class="nav collapse" [ngClass]="{'in':getMenuValue.selected}">


</div>
 <div >

  </div>

</div> <!--dd ends-->

</ng-template>  

<div class="row">
  <div class="col-sm-12">
    <nav class="navbar">
           <div class="nav">           
             <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu_copy }">
 </ng-container>
        </div>
    </nav>
  </div>
 </div>

我将不胜感激。类似的example is here堆叠闪电战。

Answer 1

您可以创建一个组件并对其进行递归

menu.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
  @Input() menues = [];

  constructor() { }

  ngOnInit() {
  }

}

menu.component.html

<div *ngFor="let menu of menues">
    <ul>
        <li>
            {{menu.title}}
            <app-menu [menues]="menu.menu" *ngIf="menu.menu"></app-menu>
        </li>
    </ul>
</div>

app.component.html

<app-menu [menues]="menues"></app-menu>

您可以检查堆叠here

您可以检查this以获得更多信息。

在范围外使用ng-template

1 个答案: