角度4のブートストラップメニューを開いたままページスワップ

Question

私は、ブートストラップメニューを使ってAngular 4アプリを開発しています。 Navは、アプリケーションのすべてのビューに表示されるコンポーネントです。サブメニューリンクを使用すると、ページスワップが発生しますが、ナビゲーションはデフォルト状態にリセットされます。私は最後の状態を覚えたり、崩壊が起こらないようにする必要があります。私はスタック上でjQueryを使用する例を見ていましたが、私は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：

​​