时间戳

首页 > 解决方案 > 有没有办法在侧面导航菜单中以角度显示递归菜单？

angular - 有没有办法在侧面导航菜单中以角度显示递归菜单？

问题描述

在这里，我正在为具有递归结构的数据库设置动态菜单。菜单出现在其他页面但在侧导航栏出现错误，有什么方法可以实现？

我创建了一个自定义组件，它在所有页面中都可以正常工作，但不能在侧面导航栏中工作。当我将自定义组件放入侧面导航栏中时，它会引发这样的错误。

compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'i'. ("ngFor="let parentNode of DynamicMenuList">
    <a *ngIf="parentNode.Path == ''" href="">
      <i [ERROR ->][ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i *ngIf="parentNode.subme"): ng:///MenuViewModule/TreeView.html@28:9
Can't bind to 'ngIf' since it isn't a known property of 'i'. ("'" href="">
      <i [ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i [ERROR ->]*ngIf="parentNode.submenu != null" class="fa fa-angle-left"></i>
    </a>

这是将自定义组件返回到布局模块的 menu-view.module.ts

import { NgModule } from '@angular/core';
import { MenuViewComponent } from './menu-view.component';
import { TreeView } from './tree-view.directory';

@NgModule({
  declarations: [
    MenuViewComponent,
    TreeView,
  ],
  exports: [
    MenuViewComponent,
    TreeView,
  ]
})
export class MenuViewModule { }

这是我的 layout.module.ts

import { NgModule } from '@angular/core';
.......
.......
import { MenuViewModule } from '../menu-view/menu-view.module';
import { LayoutSidenavComponent } from './layout-sidenav/layout-sidenav.component';

@NgModule({
  imports: [
    ......
    ......
    NgbModule,
    SidenavModule,
    MenuViewModule
  ],
  declarations: [
    ......
    LayoutNavbarComponent,
    LayoutSidenavComponent,
    LayoutFooterComponent
  ],
  providers: [
    LayoutService
  ]
})
export class LayoutModule { }

这是我的自定义组件代码

<ul class="sidebar-menu">
  <li class="treeview" *ngFor="let parentNode of DynamicMenuList">
    <a *ngIf="parentNode.Path == ''" href="">
      <i [ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i *ngIf="parentNode.submenu != null" class="fa fa-angle-left"></i>
    </a>
    <a *ngIf="parentNode.Path != ''" [routerLink]="[parentNode.Path]">
      <i [ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i *ngIf="parentNode.submenu != null" class="fa fa-angle-left"></i>
    </a>
    <ul class="treeview-menu">
      <li *ngFor="let childNode of parentNode.submenu">
        <a [routerLinkActive]="['active']">
          <i [ngClass]="childNode.icon"></i><span>{{childNode.text}}</span>
          <i *ngIf="childNode.submenu != null" class="fa fa-angle-left"></i>
        </a>
        <div *ngIf="childNode.submenu.length > 0" class="treeview-menu">
          <tree-view [DynamicMenuList]="childNode.submenu"></tree-view>
        </div>
      </li>
    </ul>
  </li>
</ul>

我实际上需要menuview进入侧面导航但它不返回，当我把它放到其他页面时

然后它为我提供了这样的完美输出。



这是我的输出：https ://imgur.com/4JplvyU


标签： angularrecursionangular-components


解决方案









在你的两个模块中添加 CommonModule



@NgModule({ 导入: [ ...... CommonModule NgbModule, SidenavModule, MenuViewModule ],










推荐阅读