角4引导菜单保持打开页面交换

Question

因此，我正在开发一个角4应用程序使用一个引导菜单。Nav是一个组件，显示在应用程序的所有视图中。当您使用子菜单链接时，您将得到一个页面交换，但是nav将重置为默认状态。我需要它记住它最后的状态，或者防止崩溃的发生。我看了Stack上使用jQuery的例子，但是，我使用的是角4，所以这对我来说不是一个解决方案。看看我看过的解决方案的其他例子：

How do I keep the child menu open when loaded?

bootstrap dropdown open on pageload

Keep Bootstrap Dropdown open in Navbar no matter what

How to keep a submenu open when the page changes

Bootstrap toggle menu expand on page load

使用localStorage的那个想法很有趣，但我想不出来。不管怎么说，这是我的代码：

nav.component.html

<div class="nav flex-column col-sm-3 col-md-2">
  <div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
    <div [ngClass]="search">
      <img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
      <i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
      <input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
      <i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
    </div>
  </div>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Transferee Dashboard</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Setup</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Accounting</a>
  </li>
  <li class="nav-menu nav-text" data-toggle="collapse" data-target="#collapse" (click)="toggleCollapse($event)" id="toggle">
    <a class="{{nav}}" id="tools">Tools</a>
    <div class="collapse" id="collapse">
      <ul class="submenu">
        <li class="nav-subtext">
          <a routerLink="/approvals">Approvals</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/change-auth">Change Authorization ID</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/copyfile">Copy Files</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/email">Email</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/templates">Email Templates</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/encrypt">Encryption</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/excel-import">Excel Import</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/formulas">Formulas</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/global-updates">Global Updates</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/import-export">Import Export</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/maintain-log">Maintain Log</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/preferences">Preferences</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/restore-delete-history">Restore/Delete/History</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/task-policies">Task Policies</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/ticklers">Ticklers</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/unlock">Unlock Records</a>
        </li>
        <li class="nav-subtext">
          <a routerLink="/user-tasks">User Tasks</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Reports</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Custom</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Tax</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Lump Sum</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">Global Compensation</a>
  </li>
  <li class="nav-menu nav-text">
    <a routerLink="#" class="nav-link">System Information</a>
  </li>
</div>

nav.component.ts

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

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
  nav: string = '';
  show: boolean = false;
  search: string = 'search';

  toggleCollapse() {
    // change show
    this.show = !this.show;
    // Change style of active link
    if (this.show !== true) {
      this.nav = 'nav-link';
    } else {
      this.nav = 'nav-link-active nav-menu-active-text';
    }
  }

  mouseEnter($event) {
    this.search = $event.type == 'mouseenter' ? 'search-box' : 'search';
  }

  mouseLeave($event) {
    this.search = $event.type == 'mouseleave' ? 'search' : 'search-box';
  }

  clear() {
    let text = document.getElementsByTagName('input');
    for (let i = 0; i < text.length; i ++) {
      if(text[i].type === 'text' && text[i].value !== '') {
        text[i].value = '';
      }
    }
  }

  constructor() { }

  ngOnInit() {
  }

}

任何帮助都会很好！

另外，如果你提供了一个答案，请解释它。

谢谢

Answer 1

对此的答案是，切换列表必须位于父元素之外。问题是通过单击父菜单项，父菜单将重新触发切换。

参见HTML：

<div class="nav flex-column col-sm-3 col-md-2">
  <div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
    <div [ngClass]="search">
      <img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
      <i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
      <input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
      <i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
    </div>
  </div>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Transferee Dashboard</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Setup</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Accounting</a>
  </li>
  <li class="nav-menu nav-text" (click)="toggleCollapse()">
    <a [ngClass]=" show ? 'active' : ''">Tools</a>
  </li>
  <ul class="submenu" *ngIf="show">
    <li class="nav-subtext">
      <a >Approvals</a>
    </li>
    <li class="nav-subtext">
      <a >Change Authorization ID</a>
    </li>
    <li class="nav-subtext">
      <a >Copy Files</a>
    </li>
    <li class="nav-subtext">
      <a >Email</a>
    </li>
    <li class="nav-subtext">
      <a >Email Templates</a>
    </li>
    <li class="nav-subtext">
      <a >Encryption</a>
    </li>
    <li class="nav-subtext">
      <a >Excel Import</a>
    </li>
    <li class="nav-subtext">
      <a >Formulas</a>
    </li>
    <li class="nav-subtext">
      <a >Global Updates</a>
    </li>
    <li class="nav-subtext">
      <a >Import Export</a>
    </li>
    <li class="nav-subtext">
      <a >Maintain Log</a>
    </li>
    <li class="nav-subtext">
      <a >Preferences</a>
    </li>
    <li class="nav-subtext">
      <a >Restore/Delete/History</a>
    </li>
    <li class="nav-subtext">
      <a >Task Policies</a>
    </li>
    <li class="nav-subtext">
      <a >Ticklers</a>
    </li>
    <li class="nav-subtext">
      <a routerLink="unlock">Unlock Records</a>
    </li>
    <li class="nav-subtext">
      <a >User Tasks</a>
    </li>
  </ul>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Reports</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Custom</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Tax</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Lump Sum</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">Global Compensation</a>
  </li>
  <li class="nav-menu nav-text">
    <a  class="nav-link">System Information</a>
  </li>
</div>