как сделать меню и подменю выделенными по умолчанию в angular7 - PullRequest
0 голосов
/ 11 июля 2019

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 для отображения значения по умолчанию выбранного подменю

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...