【发布时间】：2018-03-18 17:25:21
【问题描述】：
所以我正在使用引导菜单开发 Angular 4 应用程序。 Nav 是显示在应用程序的所有视图中的组件。当您使用子菜单链接时，您会获得页面交换，但导航会重置为默认状态。我需要它来记住它所处的最后一个状态或防止崩溃发生。我查看了 Stack 上使用 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() {
}
}
任何帮助都会很棒！
如果你提供了答案，请解释一下。
谢谢
【问题讨论】：
-
当您说“页面交换”时，您的意思是浏览器实际上正在导航到新页面吗？如果是这样，那可能不是您想要的； Angular 的全部意义在于创建一个仅根据需要加载新内容的单页应用程序。 （作为副作用，这意味着您不必“记住”页面之间的菜单状态）
-
@Dave 是的，这就是我的意思。该页面似乎正在重新加载，而不仅仅是更改视图，这不是我想要的。即将发生。我将 app.component 中的 NAV 作为一个设置组件，但它似乎随着“页面”又名视图的变化而变化
标签： javascript css twitter-bootstrap angular