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

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

使用本地存储是一个有趣的想法的人，但我不能弄清楚。反正这里是我的代码有：

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() { 
    } 

}

任何帮助将是巨大的！

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

感谢

来源

2017-10-06 T. Evans

当你说“的页面交换”你的意思是浏览器实际上是导航到一个新的页面？如果是这样，那可能不是你想要的;整个角度是创建一个单页面应用程序，只根据需要加载新的东西。（作为一个副作用，这意味着你不必在页面之间'记住'菜单状态） – Dave

@Dave是的，这就是我的意思。该页面似乎是重新加载而不是仅仅改变视图，这不是我正在寻找的。即将发生。我将app.component中的NAV作为集合组件，但它似乎随着“页面”又名视图的更改而改变 –

这个问题的答案是，切换列表必须是父元素之外。问题是通过点击父母正在反复切换的子菜单项。

查看HTML：

来源

2017-10-09 17:52:38

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

回答

相关问题