angular - Angular - 包含类别和类别中的项目的菜单(更整洁的解决方案)
问题描述
我试图用类别和类别内的项目来实现超级简单的菜单。它可以工作,但它可能是在 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;
}
}
解决方案
需要自己完成吗?我会推荐这个AngularMenu,您只需要菜单项的 json (与级别无关),它会为您完成一切。