Angular - 包含类别和类别中的项目的菜单（更整洁、更清洁的解决方案）

Question

我试图用类别和类别内的项目来实现超级简单的菜单。 它可以工作，但在 Angular 中可能更优雅、更干净。

这是一个示例： jsfiddle 。

如果我想在其中一个类别中添加下一个类别或下一个项目，那么我必须复制所有：

• 模板变量（如#categoryX 或#itemX）
• [ngClass] 指令
• (点击) 事件声明

这是很多样板代码。

@Component({selector: 'menu', template: `
<nav class="menu">
  <ul class="menu__category-list">
    <li #category1 class="menu__category" 
      [ngClass]="{'active': selectedMenuCategory == category1}"
      (click)="onClickMenuCategory(category1)">
      <span>Categoty-A</span>
      <div class="menu__item-list-container">
        <ul class="menu__item-list">
          <li #item1 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item1}"
            (click)="onClickMenuItem(item1)">
              item1
          </li>
          <li #item2 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item2}"
            (click)="onClickMenuItem(item2)">
              item2
          </li>
        </ul>
      </div>
    </li>
    <li #category2 class="menu__category" 
      [ngClass]="{'active': selectedMenuCategory == category2}"
      (click)="onClickMenuCategory(category2)">
      <span>Categoty-B</span>
      <div class="menu__item-list-container">
        <ul class="menu__item-list">
          <li #item3 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item3}"
            (click)="onClickMenuItem(item3)">
              item3
          </li>
          <li #item4 class="menu__item" 
            [ngClass]="{'active': selectedMenuItem == item4}"
            (click)="onClickMenuItem(item4)">
              item4
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>`
})
class MenuComponent {
    private selectedMenuCategory;
    private selectedMenuItem;

    onClickMenuCategory(eventArgs) {
        this.selectedMenuCategory = eventArgs;
    }

    onClickMenuItem(eventArgs) {
        this.selectedMenuItem = eventArgs;
    }
}

Answer 1

需要自己完成吗？ 我会推荐这个AngularMenu ，你只需要 json 菜单项（不管级别），它会为你做一切。