routerLinkActive маршрут для дочернего и родительского - PullRequest
Новая
       16

routerLinkActive маршрут для дочернего и родительского

0 голосов
/ 09 апреля 2019

Я пытаюсь применить или выделить маршруты навигации для моей строки меню с кодом ниже, что я мог бы получить, я мог выделить подменю, но не смог выделить родительскую строку меню. 

<li class="nav-item dropdown"><a
                        class="nav-link dropdown-toggle " id="navbarDropdownMenuLink"
                        data-toggle="dropdown" style="color: white; cursor: pointer;"
                        [routerLinkActive]="['class1']">Parent</a>
                        <div class="dropdown-menu dropdown-menu-left"
                            aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" 
                                [routerLink]="['app-child1']"
                                [routerLinkActive]="['class1']"
                                >Child 1</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" 
                                [routerLink]="['app-child2']"
                                [routerLinkActive]="['class1']"
                                >Child 2</a>
                        </div>
</li>

Класс Css: 

.class1{
    background-color: #007bff;
}

1 Ответ

0 голосов
/ 09 апреля 2019

Вы можете использовать переменную ссылки на шаблон (#), чтобы получить ссылку на routerLinkActive и ее свойства, а затем использовать isActive. 

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" 
        id="navbarDropdownMenuLink"
        data-toggle="dropdown" 
        style="color: white; cursor: pointer;"
        [ngClass]="{'class1': child1RLA.isActive || child2RLA.isActive}">  <!-- <-- Check if child routes are active -->
            Parent
    </a>
    <div class="dropdown-menu dropdown-menu-left"
        aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" 
                [routerLink]="['app-child1']"
                [routerLinkActive]="['class1']"
                #child1RLA="routerLinkActive">          <!-- <-- Assign routerLinkActive reference to child1RLA variable -->
                    Child 1
            </a>
            <div class="dropdown-divider"></div>
                <a class="dropdown-item" 
                    [routerLink]="['app-child2']"
                    [routerLinkActive]="['class1']"
                    #child2RLA="routerLinkActive">      <!-- <-- Assign routerLinkActive reference to child2RLA variable -->
                        Child 2
                </a>
            </div>
    </div>
</li>
...