Question

我现在开始使用角度，当我尝试创建切换类别菜单时，我发现了一个问题。

我的导航栏组件带有动画触发器：

  trigger('slideCategory', [
      state('opened', style({
          display: 'block',
      })),

      state('closed', style({
          display: 'none',
      })),

      state('visible', style({
          opacity: 1
      })),

      state('unvisible', style({
          opacity: 0
      })),

      transition('visible <=> unvisible', animate('300ms'))
  ])

一个看起来像这样的组件：

export class NavbarComponent implements OnInit {

ngOnInit() {

}

@Output() navState: EventEmitter<string> = new EventEmitter<string>();
menuState: string = 'out'
stateA: string = 'out';
categoryState: string = 'closed';
listState: string = 'unvisible';

navToggle() {
    this.stateA = this.stateA === 'out' ? 'in' : 'out';
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
    this.categoryState = this.menuState === 'out' ? 'closed' : 
    'closed';
    this.navState.emit(this.menuState);
}

categoryToggle($event) {
     this.categoryState = this.categoryState === 'closed' ? 'opened' : 
 'closed';
     this.listState = this.listState === 'unvisible' ? 'visible' : 
 'unvisible';
 }
}

此组件的HTML代码：

    <nav [@slideInOut]="menuState">

      <i class="{{ menuState == 'out' ? 'fa fa-bars' : 'fa fa-times' }}" (click)="navToggle()"></i>
      <ul>
        <li><a href="/"><i *ngIf="menuState == 'out'" class="fa fa-home"></i><span [@showA]="stateA">Strona główna</span></a></li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-mars"></i>
            <span [@showA]="stateA" >Mężczyzna <i (click)="categoryToggle($event)" class="{{ categoryState == 'opened' ? 'fa fa-chevron-up' : 'fa fa-chevron-down' }}" aria-hidden="true"></i></span>
          </a>
          <ul [@slideCategory]="categoryState">
            <li [@slideCategory]="listState">Obuwie</li>
            <li [@slideCategory]="listState">Okrycie wierzchnie</li>
            <li [@slideCategory]="listState">T-shirty</li>
            <li [@slideCategory]="listState">Bluzy</li>
            <li [@slideCategory]="listState">Spodnie</li>
          </ul>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-venus" aria-hidden="true"></i>
            <span [@showA]="stateA">Kobieta <i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </a>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-intersex"></i>
            <span [@showA]="stateA">Unisex <i (click)="categoryToggle()" class="{{ categoryState == 'opened' ? 'fa fa-chevron-up' : 'fa fa-chevron-down' }}" aria-hidden="true"></i></span>
          </a>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-child" aria-hidden="true"></i>
            <span [@showA]="stateA">Dzieci<i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </a>
        </li>
      </ul>

    </nav>

我想要实现的是当我点击带有（click）=“categoryToggle（）”的元素时，只切换当前点击的元素，而不是每个包含此事件的元素。

我想为点击目标添加任何类，但是为了不失去触发动画效果，我该怎么做？

Answer 1

好的，那是非常倾销。通过将categoryState声明为具有每个类别状态值的数组来解决它：

export class NavbarComponent implements OnInit {

ngOnInit() {

}

@Output() navState: EventEmitter<string> = new EventEmitter<string>();
menuState: string = 'out'
stateA: string = 'out';
categoryState: any = {
    1: 'closed',
    2: 'closed',
    3: 'closed',
    4: 'closed',
}

...

categoryToggle(index) {
    this.categoryState[index] = this.categoryState[index] === 'closed' ? 'opened' : 'closed';
    this.listState = this.listState === 'unvisible' ? 'visible' : 'unvisible';
}

Angular 2 - 触发具有相同功能的多个元素的动画

1 个答案: