html - Angular 自定义指令 css 折叠子菜单

Question

我正在关注这篇文章 https://medium.com/@alok.lko631/submenu-or-dropdown-menu-without-jquery-in-angular-2-4-5-6-using-only-bootstrap-and-custom-fd716db511be 用于折叠菜单和子菜单。我能够实现逻辑，但我面临的问题是我有多个菜单并单击另一个菜单(已经打开的菜单没有折叠)并且每当我单击子菜单的任何值时主菜单正在崩溃而不是路由..

Stackblitz 演示 https://stackblitz.com/edit/angular-y3ud5q

submenu.component.html

<aside class="main-sidebar">
    <section class="sidebar">
        <ul class="sidebar-menu tree" data-widget="tree">
            <li checkToggle *ngFor="let data of listsvalue ">
                <a>
                    <span>{{data.value}}</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="nav submenu" data-widget="tree">
                    <li *ngFor="let test of data.value ">
                        <a>
                            <span>{{test.value}}</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</aside>

submenu.directive.ts

@Directive({
  selector: '[checkToggle]'
})
export class SidebarLeftToggleDirective {
  @Input('checkToggle') partner;

  /**
  * @method constructor
  * @param elementRef [description]
  */
  constructor(public elementRef: ElementRef) { }

  @HostBinding("class.active") isOpen = false;
  @HostListener("click") toggleOpen($event) {
    this.isOpen = !this.isOpen;
  }
}

submenu.component.cs

.submenu li {
    padding-left:15px;
}

ul li .submenu {
    display: none;
}

ul li.active .submenu {
    display: block;
    list-style: none;
}

Answer 1

使用内联语句和类属性的解决方案比指令中的 Hostbinding 更容易，因为它只允许跟踪一行。

您只需要跟踪一个将保存当前打开的 li 索引的属性，然后将仅在该条件下分配类“active”:

<li [class.active]="opened==i" *ngFor="let innerData of partner.value | keyvalue;let i=index" (click)="opened=opened==i?-1:i">

这样，只要有点击，属性的评估就会在类之间切换，并使“li”打开或折叠

Demo