Question

我是Angular的初学者，我将Angular 6用于大学项目，我已经创建了一个侧边栏，并且工作正常，但是当我尝试添加子菜单时，它不起作用。

我想知道如何正确执行此操作。

子菜单示例

sidebar.ts

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

    declare const $: any;
    declare interface RouteInfo {
        path: string;
        title: string;
        icon: string;
        class: string;
    }
    export const ROUTES: RouteInfo[] = [
        { path: '/dashboard', title: 'Dashboard',  icon: 'home', class: '' },
        { path: '/class', title: 'Class',  icon: 'description', class: '' },
        { path: '/student', title: 'Students',  icon: 'apps', class: '' },
        { path: '/profile', title: 'Profile',  icon: 'person', class: '' },

    ];

    @Component({
      selector: 'app-sidebar',
      templateUrl: './sidebar.component.html',
      styleUrls: ['./sidebar.component.css']
    })
    export class SidebarComponent implements OnInit {
      menuItems: any[];

      constructor() { }

  ngOnInit() {
    this.menuItems = ROUTES.filter(menuItem => menuItem);
  }
  isMobileMenu() {
      if ($(window).width() > 991) {
          return false;
      }
      return true;
  };
}

sidebar.html

<div class="logo">
        <div class="logo-img">
        </div>
</div>
<div class="sidebar-wrapper" style="margin-top: 2.5rem;">
  <div *ngIf="isMobileMenu()">
    <ul class="nav navbar-nav nav-mobile-menu">
        <li class="nav-item">
            <a class="nav-link" href="#pablo">
                <i class="material-icons">dashboard</i>
                <p>
                    <span class="d-lg-none d-md-block">Stats</span>
                </p>
            </a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">notifications</i>
                <span class="notification">5</span>
                <p>
                    <span class="d-lg-none d-md-block">Some Actions</span>
                </p>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Mike John responded to your email</a>
                <a class="dropdown-item" href="#">You have 5 new tasks</a>
                <a class="dropdown-item" href="#">You're now friend with Andrew</a>
                <a class="dropdown-item" href="#">Another Notification</a>
                <a class="dropdown-item" href="#">Another One</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#pablo">
                <i class="material-icons">person</i>
                <p>
                    <span class="d-lg-none d-md-block">Account</span>
                </p>
            </a>
        </li>
    </ul>
  </div>
    <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>
        </li>
    </ul>
</div>

routing.ts

export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard',      component: DashboardComponent },
    { path: 'class',      component: ClassComponent },
    { path: 'student',      component: StudentComponent },
    { path: 'profile',      component: ProfileComponent},
];

Answer 1

您应该使用嵌套的ul创建嵌套的*ngFor，如下所示：我尚未在此处实现显示/隐藏，您可以根据需要使用CSS或使用angular来实现它。 / p>

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

在您的路线中，您应该添加children路线数组并添加子路径，如下所示：

export const ROUTES: RouteInfo[] = [
    { path: '/dashboard', title: 'Dashboard',  icon: 'home', class: '',
      children: [
      {
         path: '/child1', title: 'Child Menu 1',  icon: 'home', class: ''
      }
      ] },
    { path: '/class', title: 'Class',  icon: 'description', class: '' },
    { path: '/student', title: 'Students',  icon: 'apps', class: '' },
    { path: '/profile', title: 'Profile',  icon: 'person', class: '' },

];

Answer 2

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

将以下CSS添加到sidebar.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;}

将您的drop-down 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

https://stackblitz.com/edit/github-h2a2vb?embed=1&file=src/app/components/sidebar/sidebar.component.css

Answer 3

请使用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>

如何在Angular 6中将header子菜单添加到material-dashboard-angular2侧栏

3 个答案: