javascript - 在受尊敬的父级上切换下拉菜单的 ngClass

Question

我正在使用 Angular CLI 8.3.0，我想制作一个带有下拉菜单的侧边栏。我想切换“打开”类以打开下拉列表。我面临的问题是，当我单击打开下拉菜单时，它会打开所有下拉菜单。我只想仅打开被单击的内容。另外，如果我单击其他菜单项打开另一个下拉列表，我想关闭当前的下拉列表

这是组件.html

<li class="nav__item"
    (click)="toggleShowDiv('divA')"
    >
  <a target="_self">
    <mat-icon svgIcon="ic-corp-setup"></mat-icon>
    <span class="nav__text">Corp setup</span>
  </a>
  <ul class="nav-sub divA" [@slideInOut]="animationState">
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
  </ul>
</li>

<li class="nav__item"
    (click)="toggleShowDiv('divB')"
    >
  <a target="_self">
    <mat-icon svgIcon="ic-corp-setup"></mat-icon>
    <span class="nav__text">Corp setup</span>
  </a>
  <ul class="nav-sub divB" [@slideInOut]="animationState">
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
  </ul>
</li>

我的组件.ts

animationState = 'in';
  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }

动画.ts

import {
  trigger, state, style, transition,
  animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
  trigger('slideInOut', [
    state('in', style({
      'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
    })),
    state('out', style({
      'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
    })),
    transition('in => out', [group([
      animate('400ms ease-in-out', style({
        'opacity': '0'
      })),
      animate('600ms ease-in-out', style({
        'max-height': '0px'
      })),
      animate('700ms ease-in-out', style({
        'visibility': 'hidden'
      }))
    ]
    )]),
    transition('out => in', [group([
      animate('1ms ease-in-out', style({
        'visibility': 'visible'
      })),
      animate('600ms ease-in-out', style({
        'max-height': '500px'
      })),
      animate('800ms ease-in-out', style({
        'opacity': '1'
      }))
    ]
    )])
  ]),
]

i don't need the dependency of classes like "divA" or "divB" because i need to make the menu dynamic.

没有必要在此边界内提出解决方案。我对其他方法持开放态度。如有任何帮助，我们将不胜感激。

Answer 1

您可以跟踪当前选定的项目。

你的组件.component.ts

crtSelectedItem: string;

toggleShowDiv (item) {
 // In case you want to be able to open a different menu directly

 if (item === this.crtSelectedItem) {
  // Just a toggle! You clicked on the same item
  this.animationState = this.animationState === 'out' ? 'in' : 'out'; 
 } else {
   this.crtSelectedItem = item;
   // Open the new selected item directly
    this.animationState = 'in';
 }
}

那么，在你看来，你可以做这样的事情。

your-component.component.html

<li class="nav__item"
    (click)="toggleShowDiv('divA')"
    >
  <a target="_self">
    <mat-icon svgIcon="ic-corp-setup"></mat-icon>
    <span class="nav__text">Corp setup</span>
  </a>
  <ul class="nav-sub divA" [@slideInOut]="crtSelectedItem === 'divA' ? animationState : 'out'">
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
  </ul>
</li>

您可以对其他元素遵循相同的模式。