在页面刷新时，保持导航栏状态答案

【问题标题】：On page refresh, maintain the navbar state在页面刷新时，保持导航栏状态
【发布时间】：2019-06-21 09:15:15
【问题描述】：

我有一个包含多级菜单的侧边栏菜单。如果我选择了子子菜单，我希望在刷新页面后选择器导航栏在子子菜单中保持激活状态。这可能吗？

这里有一些代码：

<ng-template ngFor let-item [ngForOf]="navItems">
     <ng-template [ngIf]="item.divider">
       <li class="nav-divider"></li>
      </ng-template>
      <ng-template [ngIf]="item.title">
       <li class="nav-title">{{item.name | translate}}</li>
      </ng-template>

<ng-template [ngIf]="item.children && item.childrenVisible && !item.title 
    && (!item.children[0].children || item.children[0].children.length == 
 0)">
      <li [hidden]="itemHidden(item.keyPage) || !item.visible" class="nav- 
           item nav-dropdown" appNavDropdown>
         <a class="nav-link nav-dropdown-toggle" href="#" 
         appNavDropdownToggle>
            <i class="nav-icon {{item.icon}}"></i> {{ item.name | 
                translate }}
          <span *ngIf="item.badge" [ngClass]="'badge badge-' + 
              item.badge.variant">{{ item.badge.text }}</span>
         </a>
         <ul class="nav-dropdown-items">
            <ng-template ngFor let-subitem [ngForOf]="item.children">
               <li [hidden]="itemHidden(subitem.keyPage) || 
                  !subitem.visible" class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]=" 
                 [subitem.url]">
                <i class="nav-icon {{subitem.icon}}"></i> {{ subitem.name 
                    | translate }}
                <span *ngIf="subitem.badge" [ngClass]="'badge badge-' + 
                   subitem.badge.variant">{{ subitem.badge.text }}</span>
              </a>
            </li>
          </ng-template>
        </ul>
      </li>
    </ng-template>
</ng-template>



   public itemHidden(keyPage): boolean {
        return false;
   }

【问题讨论】：

你可以在你的component.ts中导入router得到current url，然后使用ngclass="{ 'active': checkUrl(url) }" where checkUrl 函数将它与当前路由进行比较
mmh.. 以及如何激活选定的子菜单并在刷新后打开并激活子菜单？就我而言，我无法激活任何孩子

标签： javascript css angular typescript

【解决方案1】：

您可以在单击子菜单时保存导航状态，在 ngOnInt 上您可以检查状态是否存在然后激活子菜单。

【讨论】：

【解决方案2】：

将状态作为片段存储在 URL 中

https://myapp.com/mypage#tab_state

通过使用命令，

window.location.hash='#tab_state'

通过读取页面刷新时的值，您可以将相应的子项设置为活动状态。

【讨论】：

刷新页面时子菜单也应该在子菜单上打开并处于活动状态..但它没有打开
是的，逻辑需要包含在您的代码中。

【解决方案3】：

您可以使用 RouterLinkActive ，该指令允许您在链接的路由激活时向元素添加 CSS 类

https://angular.io/api/router/RouterLinkActive

【讨论】：

您能否在答案中包含有关如何使用上述库的代码示例？单线答案违反政策。