Angular 4 Bootstrap菜单在页面交换时保持打开状态 [英] Angular 4 Bootstrap Menu Stay Open on Page Swap
本文介绍了Angular 4 Bootstrap菜单在页面交换时保持打开状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在使用引导程序菜单开发Angular 4应用程序。 Nav是一个在应用程序的所有视图中显示的组件。当您使用子菜单链接时，您将获得页面交换，但导航将重置为默认状态。我需要它来记住它所处的最后状态或防止崩溃发生。我查看了使用jQuery的Stack上的示例，但是，我使用的是Angular 4，所以这对我来说不是解决方案。看看我为解决方案寻找的其他例子：
So I am developing an Angular 4 app using a bootstrap menu. The Nav is a component that is shown in all views of the app. When you use the submenu link you get a page swap but the nav resets to the default state. I need it to remember the last state it was in or prevent the collapse from happening. I looked at examples on Stack that use jQuery, however, I am using Angular 4, so that would not be a solution for me here. Check out the other examples I have looked at for solutions:
保持Bootstrap Dropdown在Navbar中打开，无论是什么
使用localStorage的那个是一个有趣的想法，但我无法想象那个o UT。无论如何这里是我的代码：
The one using localStorage was an interesting idea but I couldn't figure that out. Anyways here is the code I have:
nav.component.html
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
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() {
}
}
任何帮助都会很棒！
如果你提供答案，请解释一下。
Also if you provide an answer please explain it.
谢谢
推荐答案
答案是切换列表必须在父元素之外。问题是单击父级重新连接切换的子菜单项。
The answer to this is that the toggled list has to be outside the parent element. The problem is by clicking a submenu item the parent is refiring the toggle.
请参阅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>
这篇关于Angular 4 Bootstrap菜单在页面交换时保持打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
