ngClass在li background-color angular 2之间切换 [英] ngClass switch between li background-color angular 2

问题描述

实际行为
当我单击任何子菜单时，所有子菜单都会更改颜色.

Actual behavior
When I click any submenu all submenus change the color.

期望的行为
当单击一个子菜单时，只有一个应该改变颜色；当单击一个子菜单时，仅一个应该改变颜色，并且子菜单(以及不是子菜单的任何其他子菜单，甚至是其他任何主菜单中的子菜单)也应该返回到它的颜色.原始颜色.

Desired behavior
When a submenu1 is clicked only that one should change the color, when submenu2 is clicked only that one should change and submenu1(and any other submenu that isn't submenu2 even the submenus inside any other main menu) should get back to it´s original color.

我下面是什么

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" *ngFor="let menu of entities">
            <a [ngClass]="{'entities-list__title--active' : menu.isOpen}" (click)="onClickMenu(menu)">{{menu.entity_name}}</a>
            <ul class="dropdown-content" >
                <li [ngClass]="{'btn-add': !menu.isOpen, 'btn-remove': menu.isOpen}" [hidden]="!menu.isOpen" (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_name}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

组件(角度2)

    onClickHome(){
        this.closeAllMenus();
        this.router.navigate(['welcome'], { skipLocationChange: true});
    }

    onClickMenu(menu){
        if (!menu.isOpen){
            this.closeAllMenus();
        }
        menu.isOpen = !menu.isOpen;
    }

    onClickSubmenu(value_id: number){
        if(value_id == 2){
            this.router.navigate(['welcome/metrics.html'], { skipLocationChange: true});
        } else{
            this.router.navigate(['welcome/extractor.html'], { skipLocationChange: true});
        }
    }

    closeAllMenus(){
        this.entities.forEach((menu) =>{
            menu.isOpen = false;
        });
    }

CSS:

.btn-add {
    background-color: red;
} 

.btn-remove {
    background-color: green;
}

推荐答案

解决方案

这是一个更简洁的代码，带有[ngClass] ="{active:value.highlighted}"，如果处于活动状态，则可以选择要应用于所需项目的样式(是/否)，我的菜单是当鼠标悬停在菜单上时，会出现一个下拉菜单，当指向其他子菜单隐藏时显示子菜单，通过这种方法，我可以使菜单保持打开状态，显示子菜单并突出显示正确的子菜单.

This is a cleaner code, with [ngClass]="{active: value.highlighted}" I can chose the style I want to be applied on the desired item if it's active (true/false), also my menu is a dropdown when cursor hover on menu display the submenus when pointing somewhere else submenus hide and with this approach I could make the menu stay open showing submenus and highlighting the proper submenu.

要指出的是，我正在使用两个* ngFor(对象数组和对象数组).

To point out I'm working with two *ngFor (an array of objects with array of objects).

HTML

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a [class]="activeMenuHome">Home</a>
        </li>
        <li *ngFor="let menu of entities"><a>{{menu.entity_name}}</a>
            <ul class="dropdown-content" [hidden]="!menu.isOpen">
                <li *ngFor="let value of menu.values">
                    <a [ngClass]="{active: value.highlighted}" (click)="onClickSubMenu(menu, value)">{{value.value_name}}</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

组件(角度2)

    onClickHome(){
        this.activeMenuHome="active";
        this.activeSubmenu="";
        this.closeAllMenus();
        this.highlightedOff();
        this.router.navigate(['welcome'], { skipLocationChange: true});
    }

    onClickSubMenu(menu, value){
        this.activeMenuHome="";
        this.closeAllMenus();
        this.highlightedOff();
        menu.isOpen = true;
        value.highlighted = true;
        //More code to navigate
    }

    closeAllMenus(){
        this.entities.forEach((menu) =>{
            menu.isOpen = false;
        });
    }

    highlightedOff(){
        this.entities.forEach((values) =>{
            values.values.forEach((value) => {
                value.highlighted = false;
            });
        });
    }

CSS

.active {
    background-color: #C8E0F6 !important;
    color: #151921 !important;
} 

这篇关于ngClass在li background-color angular 2之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！