javascript - 嵌套的 Angular 子菜单没有正确隐藏

Question

我有一个带有 Angular 2 制作的子菜单的菜单，只要有人点击它，它就会折叠和展开:

它应该是这样的:

点击管理 ->

---

现在是这样的:

点击管理 ->

为了让它看起来像第一个，我必须添加下一个 <a>嵌套菜单后的元素，以使其工作。如果我删除最后一个“ child ”，它将看起来像第二张图片。

代码是这样的

按出现顺序排列的文件名:

• 边栏.ts
• 一些相关的 CSS (.nestedmenu)
• Sidebar.html

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'sidebar-cmp',
    templateUrl: 'sidebar.html'
})

export class SidebarComponent {
    showMenu: string = '';
    isActive = false;
    addExpandClass(element: any) {
        if (element === this.showMenu) {
            this.showMenu = '0';
        } else {
            this.showMenu = element;
        }
    }
    eventCalled() {
        this.isActive = !this.isActive;
    }
}

.nested-menu {
    .list-group-item {
        cursor: pointer;
    }
    .nested {
        list-style-type: none;
    }
    ul.submenu {
        height: 0;
    }
    & .expand {
        ul.submenu {
            list-style-type: none;
            height: auto;
            li {
                a {
                    color: #FFF;
                    padding: 10px;
                    display: block;
                }
            }
        }
    }
}

<button class="btn btn-default btn-sm" id="toggle-sidebar" type="button" (click)="eventCalled()">
        &#9776;
        </button>
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}">
    <ul class="list-group">
        <a routerLink="/dashboard/home" [routerLinkActive]="['router-link-active']" class="list-group-item">
            <span class="icon">
            <i class="fa fa-fw fa-dashboard"></i>
            </span> Dashboard
        </a>
        <div class="nested-menu">
            <a class="list-group-item" (click)="addExpandClass('pages')">
                <span><i class="fa fa-users"></i> &nbsp; Admin</span>
            </a>
            <li class="nested" [ngClass]="{'expand' : showMenu === 'pages' }">
                <ul class="submenu">
                    <li>
                        <a routerLink="/dashboard/admin/device" [routerLinkActive]="['router-link-active']"> Device </a>
                    </li>
                    <li>
                        <a routerLink="/dashboard/admin/device" [routerLinkActive]="['router-link-active']"> Sensor </a>
                    </li>
                </ul>
            </li>
        </div>
        <!-- If this part is commented out it'll break the submenu above-->
        <a class="list-group-item">
            <span class="icon">
            <i class="fa fa-fw fa-dashboard"></i>
            </span> Test
        </a>
    </ul>
</nav>

我应该怎么做才能让它在不在子菜单后添加内容的情况下也能正常工作？如果我必须提供更多代码，我会这样做。

Answer 1

https://github.com/start-angular/SB-Admin-BS4-Angular-2/issues/48

在这里回答:

.I had the same problem. Just edit your _app-base.scss located in the assets/sass/ folder as I show you:

.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
height: 0;
}
& .expand {
ul.submenu {
list-style-type: none;
height: auto;
li {
a {
color: #FFFFFF;
padding: 10px;
display: block;
}
}
}
} & .hidden {
visibility: hidden; } }

then you must edit each div menu in the typescript file sidebar.ts in the following way:

<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('pages')">
<span><i class="fa fa-plus"></i> &nbsp; Menu</span>
</a>
<li class="nested" [ngClass]="{'expand' : showMenu === 'pages', hidden: showMenu !== 'pages' }">
<ul class="submenu">
<li>
<a href><span>Submenu</span></a>
</li>
<li>
<a href><span>Submenu</span></a>
</li>
</ul>
</li>
</div>

And that's all! :)