角度4マルチレベルアコーディオンの問題

Question

レベルをクリックするとアコーディオンを作成しようとしていますが、新しいアベレージがあればそれが徐々に表示されますが、今は再帰的にすべてのレベルが表示されますアコーディオン。私はあなたのためにこれを行うパッケージがあることを知っていますが、私はAngular4のより良い理解を得るために自分自身を作成し​​たい。これは私のアコーディオンが今表示されている方法ですが、私は各レベルにクリックできるようにしたいと考えています。

• メニュー1

• メニュー2

  • サブメニュー2
    • サブサブメニュー2
      • サブサブサブメニュー2

• メニュー3

私はループのインデックスまたは類似した何かでレベルを追跡する必要があると仮定していますが、私はどのように非常によく分かりません。あなたがリストの子が表示されているかどうかを判断あろう、あなたのListオブジェクトの "非表示" プロパティを追加することができ

list.ts

export class List { 
    title: string; 
    children: any; 
} 

app.component.ts

import { Component } from '@angular/core'; 
import { List } from './list'; 

const LIST: List[] = [ 
    { 
     title: 'Menu 1', 
     children: [] 
    }, 
    { 
     title: 'Menu 2', 
     children: [{ 
      title: 'Sub Menu 2', 
      children: [{ 
       title: 'Sub Sub Menu 2', 
       children: [{ 
        title: 'Sub Sub Menu 2, Sibling 1', 
        children: [] 
       }, 
       { 
        title: 'Sub Sub Sub Menu 2, Sibling 2', 
        children: [] 
       }] 
      }] 
     }] 

    }, 
    { 
     title: 'Menu 3', 
     children: [] 
    } 
]; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <ul> 
     <ng-template #recursiveList let-list> 
      <li *ngFor="let item of list; let index = index" 
      [class.selected]="item === selectedList" 
      (click)="onSelect(item)"> 
       <span> {{item.title}} </span> 

       <ul *ngIf="item.children.length > 0"> 
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container> 
       </ul> 
      </li> 
     </ng-template> 
     <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container> 
    </ul> 
    ` 
}) 
export class AppComponent { 
    title = 'Nested Accordion'; 
    list = LIST; 
    selectedList: List; 
    onSelect(list: List): void { 
     this.selectedList = list; 
    } 
} 

Answer 1

、リストアイテムがクリックされたときに真偽値を切り替えることができます。

https://plnkr.co/edit/CIGAA5BmiKU4hCMsOaIB?p=preview

export class List { 
    title: string; 
    children: any; 
    hide :boolean 
} 

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { List } from './list'; 

const LIST: List[] = [ 
    { 
     title: 'Menu 1', 
     hide : true, 
     children: [], 
    }, 
    { 
     title: 'Menu 2', 
     hide : true, 
     children: [{ 
      title: 'Sub Menu 2', 
      hide : true, 
      children: [{ 
       title: 'Sub Sub Menu 2', 
       hide : true, 
       children: [{ 
        title: 'Sub Sub Menu 2, Sibling 1', 
        hide : true, 
        children: [] 
       }, 
       { 
        title: 'Sub Sub Sub Menu 2, Sibling 2', 
        hide : true, 
        children: [] 
       }] 
      }] 
     }] 

    }, 
    { 
     title: 'Menu 3', 
     hide : true, 
     children: [] 
    } 
]; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <ul> 
     <ng-template #recursiveList let-list> 
      <li *ngFor="let item of list; let index = index"> 
       <span (click)="onSelect(item)"> {{item.title}} </span> 

       <ul *ngIf="item.children.length > 0 && !item.hide"> 

        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container> 

       </ul> 
      </li> 
     </ng-template> 
     <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container> 
    </ul> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 

    title = 'Nested Accordion'; 
    list = LIST; 
    selectedList: List; 
    onSelect(list: List): void { 
    list.hide = !list.hide; 
    this.selectedList = list; 
}