带有可折叠列表的Angular2 sidenav：只打开一个子列表

Question

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

Plunker here

这是 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.