如何將當前標記實例傳遞到angular2中的事件

Question

我有一個左側邊欄菜單，它由<li>和<ul>標記元素填充。我已處理菜單單擊事件以展開/摺疊子菜單項。

我在這裏面臨的問題是我無法傳遞/標識標記元素的當前實例來執行展開/摺疊，即如果我展開特定菜單項，所有其他菜單項也受到影響。我如何通過識別當前實例來執行所需的更改來處理此問題。

請參閱有關問題的

我的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...