如何在angular7中默认选择菜单和子菜单

时间:2019-07-11 09:29:46

标签: angular7

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}} &nbsp;
                        <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以显示所选子菜单的默认值的功能

0 个答案:

没有答案