在Angular 2中，如何在单击特定菜单时关闭所有其他菜单？

Question

我已经建立了一个带有子菜单切换的侧边栏下拉菜单。在指令中，我使用@HostBinding来添加＆＃39; open＆＃39;到父李班，并设置li.open＆gt;的css ul显示：阻止显示子菜单。我的问题在于Angular2，当我添加＆＃39; open＆＃39;时，如何删除所有其他课程。一个特定的父母李。请参阅下面的一些代码：

APP-directive.ts

import { Directive,HostListener,HostBinding} from '@angular/core';

@Directive({selector: '[appNavToggle]'})

export class NavToggleDirective {
  @HostBinding('class.open') subMenuOpened:boolean;

  @HostListener('click', ['$event'] )
    confirmFirst(event: Event) {
    this.subMenuOpened = !this.subMenuOpened;
  }}

HTML

        <li class="nav-item" appNavToggle>
        <ul class="sub-menu">
            <li class="nav-item">Submenu1</li>
            <li class="nav-item">Submenu2</li>
            <li class="nav-item">Submenu3</li>
        </ul>
       </li>

        <li class="nav-item" appNavToggle>
        <ul class="sub-menu">
            <li class="nav-item">Submenu4</li>
            <li class="nav-item">Submenu5</li>
            <li class="nav-item">Submenu6</li>
        </ul>
       </li>

CSS

li > ul { display: hide; }
li.open > ul { display: block; }