Question

我在这里使用Angular 2，TypeScript和Material Design组件进行了sidenav演示。在sidenav上有一个UL，UL中的站点和用户锚点展开以显示它们自己的子列表。

这是＆sidenav的HTML：

<md-sidenav #start mode="over" class="sideDrawer">
    <ul class="sidenav">
      <li><a>Dashboard</a></li>
      <li>
        <a (click)="sideNavClick()">Sites</a>
          <div>
            <ul *ngIf="clickedSites" class="sublist">
                <li><a (click)='sideNavAlert()'>All Sites</a></li>
                <li><a>Site Groups</a></li>
            </ul>
          </div>
      </li>
      <li>
        <a (click)="sideNavClickUser()">Users</a>
          <div>
            <ul *ngIf="clickedUsers" class="sublist">
                <li><a (click)="sideNavAlert()" >Add User</a></li>
                <li><a>Edit User</a></li>
                <li><a>Remove User</a></li>
            </ul>
          </div>
      </li>
      <li>
          <a>Lights</a>
      </li>
      <li><a>Settings</a></li>
    </ul>
</md-sidenav>

这是我的解决方案的一个非常简单的实现，但是我的真正的sidenav将在sidenav中有更多的导航选项，并且所有子项都需要显示或隐藏。但是，我只想要一次显示一个子列表。我不希望每个子列表都有一个布尔值，并使用* ngIf显示和隐藏它们，并在组件中有一些主要功能来翻转布尔值。我希望有一些更精益的东西，但我不知道Angular 2有什么可能的。我知道我可以做一个CSS解决方案，但我认为这也会迫使我为每个单独的列表添加和删除类，就像在我的其他潜在解决方案中翻转每个列表的布尔值一样。

任何想法/提示？

Answer 1

一种解决方案是将（单个）当前打开的菜单存储在变量中。只要单击可扩展菜单项，菜单就会关闭（如果已打开），或者打开，而当前打开的菜单项将关闭。

组件：

export class AppComponent {
    clicked: string = null;

    sideNavClick(clicked: string): void {
        this.clicked = this.clicked == clicked ? null : clicked;
    }

    sideNavAlert(): void {
        alert("sublist item clicked");
    }
}

模板文件：

<a (click)="sideNavClick('sites')">Sites</a>
<div>
    <ul *ngIf="clicked == 'sites'" class="sublist">...</ul>
</div>

...

<a (click)="sideNavClick('users')">Users</a>
<div>
    <ul *ngIf="clicked == 'users'" class="sublist">...</ul>
</div>

作为旁注;我肯定会建议在组件中创建一个数组，根据该数组自动生成菜单，以避免键入所有可能性。

Here is the modified Plunker

具有可折叠列表的Angular2 sidenav：仅保留一个子列表

1 个答案: