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

Question

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

这里有一些代码：

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

Answer 1

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

Answer 2

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

https://myapp.com/mypage#tab_state

通过使用命令，

window.location.hash='#tab_state'

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

Answer 3

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

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