Question

我有侧面导航，侧面菜单。当我点击菜单中的某些内容时，右侧会显示相应的细节。

菜单有子菜单，所以当我点击菜单时，子菜单也可见。

现在，当我重新加载页面时，我能够保留右侧细节但子菜单是隐藏的。我怎样才能保留它。

HTML

<nav class="sidebar">
    <ul class="list-group" *ngFor="let tenant of tenants ;trackBy: trackId">
        <div class="nested-menu">
            <a [routerLink]="['../tenant', tenant.id ]" class="list-group-item" (click)="addExpandClass(tenant.id)">
                <span><i class="fa fa-th-list"></i> &nbsp; {{tenant.name}}</span>
            </a>
            <li class="nested" [ngClass]="{'expand' : showMenu === tenant.id }">
                <ul class="submenu" *ngFor="let dataConfiguration of tenant.dataConfigurations ;trackBy: trackId">
                    <li>
                        <a href><span>{{dataConfiguration.name}}</span></a>
                    </li>
                </ul>
            </li>
        </div>       
    </ul>
</nav>

侧面菜单JS

import { Component, Input } from '@angular/core';

@Component( {
    selector: 'sidebar-cmp',
    templateUrl: 'sidebar.html',
    styleUrls: [
        'sidebar.scss'
    ]
})

export class SidebarComponent {
    @Input() tenants = 0;
    showMenu: string = '';

    addExpandClass( element: any ) {
        if ( element === this.showMenu ) {
            this.showMenu = '0';
        } else {
            this.showMenu = element;
        }
    }
}

父HTML

<div class="container-fluid">
   <div class="row">
    <div class="col-md-2">
        <sidebar-cmp [tenants] = "tenants"></sidebar-cmp>
    </div>
    <div class="col-md-10">
        <router-outlet></router-outlet>
    </div>
  </div>
</div>

Answer 1

尝试使用routerLinkActive directive，如果相关链接获得特定类，您可以使用该类定位其他所有内容（甚至将该类应用于子菜单等...）

Answer 2

使用以下HTML

<div>
<div class="row">
    <div class="col-md-3">
        <nav class="sidebar">
            <ul class="list-group" *ngFor="let tenant of tenants ;trackBy: trackId">
                <div class="nested-menu">
                    <a [routerLink]="['../tenant', tenant.id ]" class="list-group-item" (click)="addExpandClass(tenant.id)">
                        <span><i class="fa fa-th-list"></i> &nbsp; {{tenant.name}}</span>
                    </a>
                    <li class="nested" [ngClass]="{'expand' : showMenu === tenant.id }">
                        <ul class="submenu" *ngFor="let dataConfiguration of tenant.dataConfigurations ;trackBy: trackId">
                            <li>
                                <a [routerLink]="['...']"><span>{{dataConfiguration.name}}</span></a>
                            </li>
                        </ul>
                    </li>
                </div>       
            </ul>
        </nav>
    </div>
    <div class="col-md-9">
        <router-outlet> </router-outlet>
    </div>
</div>

在appmodule.ts文件中定义路由。

根据您的评论，在页面刷新期间无法处理菜单之间的切换。您可以在 tenatnts 中使用相应菜单的属性来保留状态。但是，在页面刷新之后，组件会像之前一样新加载。所以你的数据会丢失。

只有在使用状态保留机制时才有可能，这只是菜单点击扩展的开销。

保留固定左侧菜单

2 个答案: