在范围外使用ng模板

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"和第二行"E"之间。我可以将json聚类为每个4 mnus，但问题是我只能在其父菜单中显示子菜单结果——所以"A1"子菜单显示在"A"中，"B1"子菜单则显示在"B"中。这是因为我的ng模板只在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>

如果有任何帮助，我将不胜感激。这里有一个类似的stackblitz示例。

Answer 1

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

菜单组件.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>

你可以在这里查看堆叠litz

你可以查看更多信息。