В Angular 2, как закрыть все остальные меню, когда выбрано определенное меню?

В Angular 2, как закрыть все остальные меню, когда выбрано определенное меню?

Я создал раскрывающееся меню боковой панели с переключением подменю. В директиве я использую @HostBinding, чтобы добавить 'open' в родительский класс li и установить css of li.open> ul для отображения: block для отображения подменю. Мой вопрос в Angular2, как удалить 'open'of всех других классов li, когда я добавляю' open 'к одному конкретному родительскому li. См. Ниже код:

приложение-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; }

01JavaScript, HTML, угловая, машинопись,