Javascript 角四级手风琴发行

我正在尝试制作一个手风琴，所以当你点击一个关卡时，它会逐步显示每个新关卡（如果有），但现在它只是递归地显示我的手风琴的所有关卡。我知道有一些软件包可以为您实现这一点，但我想创建自己的软件包，以便更好地理解Angular4。这就是我的手风琴现在的显示方式，但我希望能够点击进入每个关卡

• 菜单1
• 菜单2
  • 子菜单2
    • 子菜单2
      • 子菜单2
• 菜单3

我假设我需要使用循环的索引或类似的东西来跟踪级别，但我不太确定如何跟踪

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;
    }
}

从'@angular/core'导入{Component}；
从“/List”导入{List}；
常数列表：列表[]=[
{
标题：“菜单1”，
儿童：[]
},
{
标题：“菜单2”，
儿童：[{
标题：“子菜单2”，
儿童：[{
标题：“子菜单2”，
儿童：[{
标题：“子菜单2，同级1”，
儿童：[]
},
{
标题：“子菜单2，兄弟2”，
儿童：[]
}]
}]
}]
},
{
标题：“菜单3”，
儿童：[]
}
];
@组成部分({
选择器：“我的应用程序”，
模板：`
{{title}}


{{item.title}




`
})
导出类AppComponent{
标题=‘嵌套手风琴’；
列表=列表；
selectedList：列表；
onSelect（列表：列表）：无效{
this.selectedList=列表；
}
}

您可以在列表对象上添加“隐藏”属性，当单击列表项时，该属性将确定列表的子项是否可见，并在真/假值之间切换

下面是一个基于您的代码的演示Plunker：

导出类列表{
标题：字符串；
儿童：任何；
隐藏：布尔值
}
//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
从“/List”导入{List}；
常数列表：列表[]=[
{
标题：“菜单1”，
隐藏：是的，
儿童：[]，
},
{
标题：“菜单2”，
隐藏：是的，
儿童：[{
标题：“子菜单2”，
隐藏：是的，
儿童：[{
标题：“子菜单2”，
隐藏：是的，
儿童：[{
标题：“子菜单2，同级1”，
隐藏：是的，
儿童：[]
},
{
标题：“子菜单2，兄弟2”，
隐藏：是的，
儿童：[]
}]
}]
}]
},
{
标题：“菜单3”，
隐藏：是的，
儿童：[]
}
];
@组成部分({
选择器：“我的应用程序”，
模板：`
{{title}}


{{item.title}




`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
标题=‘嵌套手风琴’；
列表=列表；
selectedList：列表；
onSelect（列表：列表）：无效{
list.hide=！list.hide；
this.selectedList=列表；
}

太棒了。谢谢！很高兴能帮上忙！；）

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;
}