как передать текущий экземпляр тега событиям в angular2

Question

У меня есть меню левой боковой панели, которое заполнено <li> и <ul> элементами тега. Я обработал событие щелчка меню, чтобы развернуть/свернуть элементы подменю.

Проблема, с которой я столкнулся, заключается в том, что я не могу передать/идентифицировать текущий экземпляр элемента тега, чтобы выполнить разворот/сбой i.e. Если я разворачиваю определенный пункт меню, все остальные элементы меню также подвергаются воздействию. Как я могу справиться с этой проблемой, указав текущий экземпляр для внесения необходимых изменений.

Пожалуйста, обратитесь снимком о проблеме

мой HTML выглядит, как показано ниже

<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)"> 
    <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a> 
     <ul class="nav child_menu" [style.display]="subMenuDisplay"> 
     <li> 
      <a href="index.html">Dashboard</a> 
     </li> 
     <li> 
      <a href="index2.html">Dashboard2</a> 
     </li> 
     <li> 
      <a href="index3.html">Dashboard3</a> 
     </li> 
    </ul> 
</li> 
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)"> 
    <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a> 
    <ul class="nav child_menu" [style.display]="subMenuDisplay"> 
     <li> 
      <a href="form.html">General Form</a> 
     </li> 
     <li> 
      <a href="form_advanced.html">Advanced Components</a> 
     </li> 
     </ul> 
</li> 

моего компонента, в котором я обработал событие

export class Layout { 
    menuLinkActive: any; 
    subMenuDisplay: any; 
    isSubMenuExpanded: any; 
    isMenuVisible: any; 

    MenuLinkToggle(event) { 
     if (this.isSubMenuExpanded) { 
      console.log("if (this.isMenuExpanded) {"); 
      this.menuLinkActive = ""; 
      this.subMenuDisplay = "none"; 
      this.isSubMenuExpanded = false; 
     } 
     else { 
      console.log("else (this.isMenuExpanded) {"); 
      this.menuLinkActive = "active"; 
      this.subMenuDisplay = "block"; 
      this.isSubMenuExpanded = true; 
     } 
    } 
} 

Answer 1

<li [class.active]="menuLinkActive" #li1 (click)="MenuLinkToggle($event, li1)"> 

MenuLinkToggle(event, element) { 

или

MenuLinkToggle(event) { 
     event.target...