我跟随这篇文章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;
}