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

svg.children[0].setAttribute("transform", "translate(" + 100 / 2 + "," + (100 / 2 + 10) + ") rotate(-90 0 0)");

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

或

MenuLinkToggle(event, element) {

如何将当前标记实例传递给angular2中的事件

1 个答案: