Question

我正在尝试创建一个多级导航菜单，在您进行选择时会折叠。

因此，如果我们有一个组件树...模块1，模块2和模块3 ...每个都有它自己的子组件（每个模块的a，b和c）等等。

开始时，我想提供选项：

第1单元：第2单元：第3单元

如果用户选择模块2，我希望发生以下情况： 1）模块1和模块3按钮折叠/隐藏 2）模块2按钮接收“向下箭头”并有效地成为由模块1，模块2和模块3组成的下拉列表。 3）模块2（例如2A，2B和2C ..）的导航按钮显示。

所以结果看起来像这样：

第2单元▼＆gt; 2A：2B：2C

此外，然后选择2C将执行相同的概念...将2A和2B折叠成2C上的下拉列表并显示2C的导航选项。留下漂亮的小面包屑。每个项目的内容将显示在此菜单下方。这与现代文件浏览器（Say，Windows 10文件资源管理器）中的导航栏并不完全不同。

那就是说，我不完全确定如何做到这一点。我开始将各种组件拼凑成可以工作的树形导航结构。但是当谈到崩溃时，虽然我可以做到这一点，但我不禁想到我做错了。我不想走这条路太远，却发现我的方向错了。

这是主要的app.component：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `<h1>Multi level tree routing Proof of Concept</h1>
            App Navigate:<nav>
            <div *ngIf="navModShow[0]" >
                <a (click)="hideOthers(0);" [routerLink]="['/module1']">Module1</a>
            </div>
            <div *ngIf="navModShow[1]" >
                <a (click)="hideOthers(1);" [routerLink]="['/module2']">Module2</a>
            </div>
            <div *ngIf="navModShow[2]" >
                <a (click)="hideOthers(3);" [routerLink]="['/module3']">Module3</a>
            </div>
    </nav>
            <br>----------------App component router outlet below --------------<br>
            <router-outlet></router-outlet>`
        })
export class AppComponent  {
navModShow = [true,true,true];  // TODO: has to be a better way?

    hideOthers(i) {
        this.navModShow.forEach( (item,index)=> {
            if(index!=i) {
                this.navModShow[index]=false;
            }
        });
    }

折叠angular2中导航菜单的其他按钮

0 个答案: