Я использую Angular 7 и динамически создал Navbar, используя data.json.
Я хотел, чтобы в topbaricons также было раскрывающееся меню для предупреждений.Torq и alertMessage.
Для других меню в панели навигации я использовал key в качестве меню и значение в качестве подменю, здесь описано, как обрабатывать только значения из data.json из сообщения и оповещения и назначать его в качестве раскрывающегося списка для сообщения и оповещения.
data.json:
{
"Dashboard": [],
"Shipment": [“CAR”, “BUS”, "Vehicle", "Railcar" ],
"Admin": [“Settings”, "Partners", "Management”],
“Message” : [“All Message”,”New Message”,”Read Message”],
“Alert”: [“New”,”Old”,”resolved”]
}
Nav.component.html:
<nav class="navbar navbar-expand-md navbar-light appMenuBar">
<a href="#" class=" appName">MY APP</a>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item " [ngClass]="{'liactive': selectedItem ==item}"
(click)="listClick($event, item)"
*ngFor="let item of menuJson | keys ; let i = index">
<a class="nav-link appSubMenu"
*ngIf="item.value.length==0" id="{{i}}">{{item.key}}</a>
<a *ngIf="item.value.length!=0" href="#"
class="nav-link dropdown-toggle appSubMenu"
data-toggle="dropdown" id="{{i}}">
{{item.key}}
<img class = "chevDownTorq" src="assets/icons/chevron_down_torq.png"/>
</a>
<div class="dropdown-menu" >
<a href="javascript:void(0)" *ngFor="let item of item.value " class="dropdown-item">{{item}}</a>
</div>
</li>
</ul>
</div>
<div class="topbaricons" >
<img class = "alertTorq" src="assets/icons/alerts_torq.png">
<img class = "alertMessage" src="assets/icons/messages_torq.png" >
</div>
</nav>
Nav.component.ts:
import menuData from './data.json';
menuJson: any;
ngOnInit() {
this.submenuActive = "";
this.menuJson = menuData;
}