这就是它应该是这样的：

点击管理员 - ＆gt;

现在的样子如下：

点击了管理员 - ＆gt;

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

此代码如下所示

文件名按出现顺序：

Sidebar.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

在这里回答：

。我有同样的问题。只需编辑位于的_app-base.scss即可   我向您展示了assets / sass /文件夹：

ifeq ($(dif),null)

然后你必须按照以下方式编辑typescript文件sidebar.ts中的每个div菜单：

.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; } }

就是这样！：）

嵌套的Angular子菜单无法正确隐藏

这就是它应该是这样的：

现在的样子如下：

1 个答案: