Angular 4 多级手风琴问题

Question

我正在尝试制作一个手风琴，所以当您单击一个级别时，它会逐步向您显示每个新级别（如果有的话），但现在它只是递归地显示我的手风琴的所有级别。我知道有些包可以为你做这件事，但我想创建自己的包以更好地理解 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;
    }
}

Answer 1

您可以在列表对象上添加 "hide" 属性，这将确定列表的子项是否可见，并在 true/false 值之间切换，当列表项被点击。

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

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

Angular 4 多级手风琴问题

Angular 4 Multilevel Accordion Issue

javascript

angular2-template

angular