Angular - Меню с категориями и пунктами в категории (более аккуратное решение)

Question

Я попытался реализовать супер простое меню с категориями и пунктами внутри категории.Это работает, но, вероятно, это более элегантный и чистый способ сделать это в Angular.

Вот пример: jsfiddle .

Если я хочу добавить следующую категорию или следующуюэлемент внутри одной категории, тогда мне придется скопировать все:

• переменная шаблона (например, #categoryX или #itemX)
• [ngClass] директива
• (click) объявление события

Это много стандартного кода.

@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 для пунктов меню (не имеет значения, уровни), и он все сделает за вас.