Angular custome dirictive 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相比，使用内联语句和类attibute的解决方案可能要简单得多，因为它只允许跟踪一行。

您只需要跟踪一个将保存当前打开的li索引的属性，那么类“active”将只在该条件下被赋值：

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

这样，只要有一个点击，财产的估价就会在类之间切换，使“李”的打开或崩溃

演示