我试图用类别和类别内的项目实现超简单菜单。 它可以工作,但可能是在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;
    }
}

#1楼 票数:0

您需要自己完成吗? 我建议使用此AngularMenu ,您只需要菜单项的json(与级别无关),即可为您完成所有操作。

  ask by jjack translate from so

未解决问题?本站智能推荐:

1回复

Angular-菜单没有出现

我正在尝试使用 angular 和 Ionic 版本 5 实现一个简单的菜单,但是该菜单没有显示在主主页上。 一个图标应该出现在屏幕的左上角,用户可以点击/点击它以显示 app.component.html 中包含的项目的下拉菜单我的代码如下主页.html app.component.htm
1回复

如何处理angular2中的菜单

当用户单击一个选项时,我想将类设置为活动状态并运行一个函数。 我尝试将我的 JQuery 代码转换为 angular2,Jquery 代码如下: 此函数仅将类设置为正确的选项并将绝对定位的 div.underline 移动到活动选项下方。 在angular2上,我的HTML片段如下: 我的组件如下:
1回复

Angular8-如何在我的Angular项目中构建包含所有路由的动态菜单?

我正在使用 loadChildren 来组织我的路线,如下所示: app-routing.module.ts cadastros-routing.module.ts 我想建立一个动态菜单,所以我尝试使用这个: 这是结果: console.log(this.router.config) 但我无法访
1回复

Angular中的离子菜单(ion-menu)-禁用背景

Angular 中的离子菜单 (ion-menu) - 禁用背景你好,我想知道在使用离子菜单时是否有办法禁用背景? 我想在菜单打开时保持页面的功能。 我正在寻找类似于 O365 管理界面上的内容。
1回复

如何在Angular材质中创建动态多级菜单

我有个问题。 我需要使用角度材质创建一个动态多级菜单,数据源如下所示 数据结构可以增长到任何深度,因此是动态的。 如何调整它以创建动态多级角度材质菜单?。 该文档仅采用静态示例
2回复

Angular5中json对象的动态嵌套材质菜单

如何从json对象创建动态嵌套菜单? 我今天第一次开始使用Angular Material Design,我正在尝试使用材质设计创建嵌套菜单。 对于静态内容, 文档非常简单。 但我需要从json对象创建动态嵌套菜单,我无法在任何地方找到一个简单的解决方案。 它只需要一层深。 js
1回复

Angular8菜单中的用户登录/注销按钮未更新

我有一个带有登录/注销按钮的mat-toolbar ,网站用户可以随时登录或退出。 我有一个身份验证服务,它使用用户数据创建一个 Observable 并使用*ngIf="!(authService.user$ | async)作为登录按钮。但这不起作用,除非我手动刷新整个页面。这是为什么以及如何处
2回复

Angular材质菜单中的叠加显示不正确

我根据此处的说明连接菜单组件: https : //material.angular.io/components/menu/overview 。 但是菜单的主体只是简单地插入到文档的主体中,看起来不像模态窗口。 包.json angular.json app.module.ts 应用程序组件.