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

发布时间：2020-12-17 18:07:22 所属栏目：安全来源：网络整理

导读：我是Angular的初学者,我使用Angular 6作为我的大学项目, 我已经创建了一个侧边栏并且它运行良好,但是当我尝试添加子菜单时它不起作用. 我想知道如何正确地做到这一点. I’ve used this dashboard 示例子菜单 sidebar.ts import { Component,OnInit } from '@

我是Angular的初学者,我使用Angular 6作为我的大学项目,
我已经创建了一个侧边栏并且它运行良好,但是当我尝试添加子菜单时它不起作用.

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

I’ve used this dashboard

示例子菜单

ample submenu

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',{ path: '/student',title: 'Students',icon: 'apps',{ path: '/profile',title: 'Profile',icon: 'person',];

    @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},];

解决方法

你应该用嵌套的* ngFor创建一个嵌套的ul,如下所示：我还没有在这里实现show / hide,你可以根据需要使用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>

在您的路由中,您应该添加子路径数组并添加子路径,如下所示：

export const ROUTES: RouteInfo[] = [
    { path: '/dashboard',class: '',children: [
      {
         path: '/child1',title: 'Child Menu 1',class: ''
      }
      ] },];

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!