Angular 4 Bootstrap菜单保持打开页面交换

Question

所以我正在使用引导程序菜单开发Angular 4应用程序。 Nav是一个在应用程序的所有视图中显示的组件。当您使用子菜单链接时，您将获得页面交换，但导航将重置为默认状态。我需要它来记住它所处的最后状态或防止崩溃发生。我查看了使用jQuery的Stack上的示例，但是，我使用的是Angular 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>