アングル2のアニメーションを使用してアコーディオンナビゲーションを作成する

Question

アングル2で折り畳み可能なアコーディオンメニューを作成しようとしています。現時点では、私のコードでアングル2のアニメーションを使用してサブメニューを拡大/問題は、親がクリックされたときに、特定のサブメニューを展開する必要があることです。

私の現在のセットアップ次のようになります。今

<nav> 
<ul> 
    <li> 
    <span (click)="toggleSubMenu()"> 
     List Item 1 
    </span> 
    <ul [@subMenuToggle]="subMenuState" class="sub-menu"> 
     <li><a href="#">New</a></li> 
     <li><a href="#">Edit</a></li> 
     <li><a href="#">Remove</a></li> 
    </ul> 
    </li> 
    <li> 
    <span (click)="toggleSubMenu()"> 
     List Item 2 
    </span> 
    <ul [@subMenuToggle]="subMenuState" class="sub-menu"> 
     <li><a href="#">New</a></li> 
     <li><a href="#">Edit</a></li> 
     <li><a href="#">Remove</a></li> 
    </ul> 
    </li> 
</ul> 
</nav> 

私が展開するメインメニュー項目のいずれかに、その後（リスト項目1または2）の両方のサブメニューをクリックします。

私の現在のアニメーションのトリガーはこのようになります（私は、対応する子のサブメニューが展開したい）：

export class NavSidebarComponent { 

    subMenuState: string = 'subMenuDeselected'; 


    toggleSubMenu() { 
    this.subMenuState = (this.subMenuState === 'subMenuSelected' ? 'subMenuDeselected' : 'subMenuSelected'); 
    } 

} 

は、次のとおりです。

trigger('subMenuToggle',[ 
    state('subMenuSelected', style({opacity: '1', height: '*'})), 
    state('subMenuDeselected', style({opacity: '0', height: '0px', overflow: 'hidden'})), 
    transition('subMenuSelected <=> subMenuDeselected', [ 
    animate('150ms ease-out') 
    ]) 
]) 

とtoggleSubMenu（）メソッドは、状態を変更しますtoggleSubMenu（）メソッドを使用して、どのメニュー項目がクリックされたのか把握し、対応するサブメニューを展開するのに良い方法はありますか？または、それぞれの親メニュー項目ごとにトグルメソッドを個別に作成する必要がありますか？

ありがとうございます。

Answer 1

私は別のルートを取って、ドロップダウン効果のカスタムディレクティブを作成することを決めたので、私は実際に各リスト項目のための方法を作成せずにアニメーションを使用してそれを把握することができませんでした。私は私のドロップダウンディレクティブで：

import {Directive, HostBinding, HostListener} from '@angular/core'; 

@Directive({ 
    selector: '[appDropdown]' 
}) 
export class DropdownDirective { 

    @HostBinding('class.open') get opened() { 
    return this.isOpen; 
    } 
    @HostListener('click') open() { 
    this.isOpen = (this.isOpen === true ? false : true); 
    } 

    private isOpen = false; 

} 

これは、基本的にクリックされたときの要素が真か偽であるかどうかを追跡すると、真と偽のすべてのクリックを切り替えます。 trueの場合、要素に.open cssクラスが追加されます。

私はディレクティブを作成した後、私は私のnav要素にインポート：私は私の要素にカスタムドロップダウン指令付属

import { DropdownDirective } from "./dropdown.directive"; 

次へ：

<nav> 
<ul> 
    <li> 
    <span appDropdown> 
     List Item 1 
    </span> 
    <ul class="sub-menu"> 
     <li><a href="#">New</a></li> 
     <li><a href="#">Edit</a></li> 
     <li><a href="#">Remove</a></li> 
    </ul> 
    </li> 
    <li> 
    <span appDropdown> 
     List Item 2 
    </span> 
    <ul class="sub-menu"> 
     <li><a href="#">New</a></li> 
     <li><a href="#">Edit</a></li> 
     <li><a href="#">Remove</a></li> 
    </ul> 
    </li> 
</ul> 
</nav> 

をし、最終的に私が行うためにCSSを使用.openクラスはspan要素に追加されたときに、私はちょうどにサブメニューのスタイルを変更することがheight: 0;とopacity: 0;だ行うことで、最初はサブメニュー<ul>を非表示にすることで、実際のドロップダウンアニメーションおよびheight: 100%;

.sub-menu{ 
    opacity: 0; 
    overflow: hidden; 
    height: 0; 
} 

.open + ul.sub-menu { 
    opacity: 1; 
    height: 100%; 
} 

Answer 2

toggleSubMenu（）に引数を渡すことはできますか？ 例えば：

<span (click)="toggleSubMenu(1)"> 
    List Item 1 
</span>