Angular2 Как написать эффективный метод для выделения активного меню в navbar

Question

В моем приложении навигационная панель имеет до 2 уровней подменю.Мое требование - изменить несколько функций меню, когда оно выбрано или выбрано любое из его подменю (любого уровня).Мне дали этот код, который делает это неэффективно до даты (то есть) написания одной функции для каждого в навигационной панели, которая будет вносить все свои специфические изменения CSS / изображения.Но я хотел бы найти эффективный способ (в основном один метод), который будет выполнять все изменения CSS, когда требуемые данные предоставляются в качестве входных данных.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
    <ul class="list-unstyled components">
        <li class="firstEmptyDiv">
            <div class="toggleBtnDiv" (click)="toggleBtn()">
                <i class="fa fa-bars toggleButton" aria-hidden="true"></i>
            </div>
        </li>
        <li>
            <a routerLink="/dashboard" routerLinkActive="active">
                <img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
                <br>
                <span class="textWrap" *ngIf="buttonColor">Dashboard</span>
            </a>
        </li>
        <li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
                        [style.background-color]="color">
                    <img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
                    <span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
                    <span [style.color]="caretColor" class="caret"></span>
                </button>
                <ul class="dropdown-menu slide">
                    <li *ngIf="this.dataService.hasViewLocationAccess">
                        <a routerLink="/location" routerLinkActive="active">Location</a>
                    </li>
                    <li *ngIf="this.dataService.hasViewBranchAccess">
                        <a routerLink="/branch" routerLinkActive="active">Branch</a>
                    <li *ngIf="this.dataService.hasViewRoleAccess">
                        <a routerLink="/role" routerLinkActive="active">Role</a>
                    </li>
                    <li *ngIf="this.dataService.hasViewDepartmentAccess">
                        <a routerLink="/department" routerLinkActive="active">Department</a>
                    </li>
                    <li *ngIf="this.dataService.hasViewDesignationAccess">
                        <a routerLink="/designation" routerLinkActive="active">Designation</a>                            
                    </li>
                    <li *ngIf="!needToShowFlag">
                        <a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="nav nav-stacked">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
                        [style.background-color]="leaveModulecolor">
                    <img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
                    <span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
                    <span [style.color]="caretColorLeave" class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
                        <a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" *ngIf="openSecondListFlag">
                            <li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
                                <a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
                            </li>
                            <li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
                                <a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
                            </li>
                        </ul>
                    </li>
                    <li class="applyLeaveTab">
                        <a (click)="applyLeave()">Apply Leave</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
    <router-outlet></router-outlet>
</div>

В этом фрагменте кода, когдаЯ выбираю подменю «Местоположение», затем его главное меню «Структура компании» должно быть изменено со следующими значениями CSS:

1) Для этого меню должно быть загружено другое изображение

2) цвет фона будет изменен

3) цвет символа каретки будет изменен

4) будет добавлен другой цветной левый край

5) цвет фона 'Расположение подменю должно быть изменено.

Подобное изменение CSS должно произойти, если щелкнуть подменю 2 уровня, например, «Общая конфигурация» в примере.

Приветствуются любые предложения по эффективному способу удовлетворения этого требования.Спасибо!