html - 单击 Angular 4 将事件类添加到子菜单

标签 html css angular typescript angular5

我在 Angular 4 中创建了一个嵌套菜单。我遇到了事件类的问题。这是我的代码。

My code

我可以将事件类添加到主链接,但是我应该如何根据点击将事件类添加到子菜单。请帮忙

最佳答案

您可以创建一个对象来存储为main 链接和sub 链接选择的内容,然后相应地应用该类。

例如,您可以将 main 作为参数传递,以表明它是一个主链接,并相应地检查 main 本身的 isActive

(click)="select('main', n.name);" [ngClass]="{active: isActive('main', n.name)}"

同样,对于sub链接也可以做到。

您的功能可能如下:-

  select(type, item, $event) {
    this.selected[type] = (this.selected[type] === item ? null : item);
    $event ? $event.stopPropagation() : null;
  }
  isActive(type, item) {
    return this.selected[type] === item;
  }

我想您可能会在选择可选的子链接时停止传播(请测试您的用例)。

请检查下面的代码:-

https://stackblitz.com/edit/angular-7b7cwd?file=src/app/app.component.html

关于html - 单击 Angular 4 将事件类添加到子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51739989/

相关文章:

html - 如何对齐 MySpace 页面上的图像?

php - 全高右格

javascript - 使用 Resolve 查看之前在 Contentful 上托管的 Angular 8 加载图像

javascript - Angular MaterializeCSS FormArray 选择器

javascript - jQuery resizable splitter异常行为

html - 当用户输入文本时,如何单独使用 CSS 在 HTML 输入框中显示 'clear' 文本

javascript - 如何在中心外自定义谷歌图表标签数据

html - 谷歌地图有额外的宽度

CSS3 旋转 div 但保持背景不旋转

javascript - Angular 7导入所有但忽略一个文件