data.json
{
"Dashboard": [],
"Shipment": [“CAR”, “BUS”, "Vehicle", "Railcar" ],
"Admin": [“Settings”, "Partners", "Management”],
}
Nav.component.html
<nav class="navbar navbar-expand-md navbar-light appMenuBar">
<a href="#" class=" appName">MY APP</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<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>
</nav>
Nav.component.ts
import menuData from './data.json' ;
@Component({
selector: 'app-navigation-bar',
templateUrl: './navigation-bar.component.html',
styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit {
menuJson: any;
submenuActive: string;
selectedItem: any;
constructor() { }
ngOnInit() {
this.submenuActive = "";
this.menuJson = menuData;
}
hightLightBlue(i){
var j = 1;
Object.keys(this.menuJson).forEach(function(key) {
(document.getElementById(i) as HTMLInputElement).className = "";
});
(document.getElementById(i) as HTMLInputElement).className = "activeMenbar";
}
listClick(event, newValue) {
this.selectedItem = newValue;
}
}
我有一个导航栏,在这里我希望在加载时默认情况下在主菜单中选择“管理员”,以及默认情况下也选择“管理”子菜单。 listclick()
是我用来启用Mainmenu和SubMenuActive以显示所选子菜单的默认值的功能