css - 如何将当前标签实例传递给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...