如何将标题子菜单添加到Angular 6中的material-dashboard-angular2侧栏

我是Angular的初学者，我在大学项目中使用Angular 6， 我创建了一个侧边栏，它工作得很好，但是当我尝试添加一个子菜单时，它不工作

我想知道如何正确地做到这一点

示例子菜单

侧边栏.ts

从'@angular/core'导入{Component，OnInit}；
声明const$：任何；
声明接口RouteInfo{
路径：字符串；
标题：字符串；
图标：字符串；
类别：字符串；
}
导出常量路由：RouteInfo[]=[
{路径：'/dashboard'，标题：'dashboard'，图标：'home'，类：'}，
{路径：'/class'，标题：'class'，图标：'description'，类：'}，
{路径：'/student'，标题：'Students'，图标：'apps'，类：'}，
{路径：'/profile'，标题：'profile'，图标：'person'，类：'}，
];
@组成部分({
选择器：“应用程序侧栏”，
templateUrl:'./sidebar.component.html'，
样式URL:['./sidebar.component.css']
})
导出类SidebarComponent实现OnInit{
菜单项：任何[]；
构造函数（）{}
恩戈尼尼特（）{
this.menuItems=ROUTES.filter（menuItem=>menuItem）；
}
isMobileMenu（）{
如果（$（窗口）.width（）>991）{
返回false；
}
返回true；
};
}

sidebar.html

{{menuItem.icon}
{{menuItem.title}

路由。ts

导出常量AdminLayoutRoutes:路由=[
{路径：'dashboard'，组件：DashboardComponent}，
{path:'class'，component:ClassComponent}，
{路径：'student'，组件：StudentComponent}，
{path:'profile'，component:ProfileComponent}，
];

您应该使用嵌套的

*ngFor

创建一个嵌套的

ul

，如下所示：我尚未在此处实现显示/隐藏，您可以根据需要使用css或使用angular来实现它

 <ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
            <ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
                <ul class="nav">
                   <li routerLinkActive="active" *ngFor="let childmenu of menuItem.children" class="{{menuItem.class}} nav-item">
                     <a class="nav-link" [routerLink]="[childmenu.path]">
                       <i class="material-icons">{{childmenu.icon}}</i>
                       <p>{{childmenu.title}}</p>
                      </a>
                   </li>
                </ul>
            </ng-container>
        </li>
    </ul>

---

您可以执行以下操作来完成此任务

将以下CSS添加到

侧栏.component.CSS

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  margin-left: 12%;
  background-color: #f1f1f1;
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding-bottom:12px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  font-size: 8px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

将

下拉列表

div更改为以下内容

<div class="dropdown-content" aria-labelledby="navbarDropdownMenuLink">
    <a href="#">Mike John responded to your email</a>
    <a href="#">You have 5 new tasks</a>
    <a href="#">You're now friend with Andrew</a>
    <a href="#">Another Notification</a>
    <a href="#">Another One</a>
</div>

Stackblitz

---

请用ul标签移除ul标签内的所有内容并粘贴我的代码

  <ul class="nav-item">
<a data-toggle="collapse" href="#collapseExample1" class="collapsed">
  <span>
    Menu
    <b class="caret"></b>
  </span>
</a>
<div class="collapse" id="collapseExample1">
  <ul class="nav">
    <li class="nav-item">
      <a href="javascript:void(0)" class="nav-link">
        <span class="sidebar-normal">Sub menu 01</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="javascript:void(0)" class="nav-link">
        <span class="sidebar-normal">Sub menu 02</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="javascript:void(0)" class="nav-link">
        <span class="sidebar-normal">Sub menu 03</span>
      </a>
    </li>
  </ul>
</div>

---

你是如何创建侧边栏的？嗨@Neryortz我不清楚，我的侧边栏工作得很好。我想知道如何为side Barhi@Bearniti添加子菜单能否共享side Barhi@Bearniti的component.html我更新了我的问题能否共享结果的屏幕截图？控制台中是否有错误？如果你有错误也可以分享。嗨，谢谢你的解决方案，但是我没有看到任何我可能误解的侧栏下拉列表，你的示例屏幕截图看起来是一个可折叠的子菜单。请澄清您的示例屏幕截图，您需要从该子菜单中执行什么操作？当您单击侧栏菜单中的

5 some actions

通知标题时，是否希望它在侧栏中展开以显示子操作项？您好，我看到了您的示例侧栏，未提供子菜单选项请参见修订版stackblitz和答案。

  <ul class="nav-item">
<a data-toggle="collapse" href="#collapseExample1" class="collapsed">
  <span>
    Menu
    <b class="caret"></b>
  </span>
</a>
<div class="collapse" id="collapseExample1">
  <ul class="nav">
    <li class="nav-item">
      <a href="javascript:void(0)" class="nav-link">
        <span class="sidebar-normal">Sub menu 01</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="javascript:void(0)" class="nav-link">
        <span class="sidebar-normal">Sub menu 02</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="javascript:void(0)" class="nav-link">
        <span class="sidebar-normal">Sub menu 03</span>
      </a>
    </li>
  </ul>
</div>