Question

我有一个正在运行的Angular 4应用程序，我正在实现登录机制。成功登录后，我将页面重定向到My HeaderComponent，其中有一个图像可以在点击时切换侧边栏。但问题是，在登录后我需要刷新页面一次才能打开侧栏。它不是第一次尝试开放。我尝试使用 window.location.reload（）但不能正常工作。此外，一些相关的帖子建议使用params导航到相同的URL **（在我的情况下为/ admin）**然后再调用一个调用ngOnInit的方法。但在我的情况下，ngOnInit（）中没有需要获取的特殊数据，而是我的HTML似乎被打破了。有什么建议??

我的组件： -

Login.ts

if (this.myForm.value.username === 'admin' && this.myForm.value.password === 'Pooltoo@dm!n') {
    localStorage.setItem('admintoken', 'Pooltoo@dm!n1234!@#$');
    this.router.navigateByUrl('/admin');
  }else {
    alert('Wrong Username/Password Combination. Pls try again!!');
  }

HeaderComponent.ts

    export class HeaderComponent implements OnInit {

  constructor (private adminService: AdminService, private router: Router) {


  }


   onLogout() {
    this.adminService.logOutAdmin();
    this.router.navigateByUrl('/login');
  }

  isLoggedIn() {
    return this.adminService.isLoggedIn();
  }

   ngOnInit() {

    if (!this.adminService.isLoggedIn()) {
      this.router.navigateByUrl('/login');
    }

   }


}

HeaderComponent.html

    <div id="wrapper" *ngIf="isLoggedIn()">
<nav class="navbar navbar-inverse">
  <div class="container-fluid" id="navHeight">
  <!--  <a  class="btn btn-primary" id="menu-toggle">Toggle Menu</a>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" id="menu-toggle" >Pooltoo Admin DashBoard<span><img src="assets/images/brand.png" style="width: auto; height: 30px" class="img-rounded"></span></a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <form class="navbar-form navbar-left">

      </form>
      <ul class="nav navbar-nav navbar-right">

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



  <!-- Sidebar -->
  <div id="sidebar-wrapper">

    <li class="sidebar-brand">
      <a routerLinkActive="active">
        <span><img alt="Brand" id="pooltoLogo" src="assets/images/logo.png"  style="height: 120px; width: 140px; margin-top: -50px"></span>
      </a>
    </li>

    <button class="btn btn-danger" (click)="onLogout()" style="margin-left: 50px; margin-bottom: 10px">LogOut</button>

    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['dashboard']">Dashboard</a>
      </li>
    </ul>
      <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a  [routerLink]="['configurations']">Configurations</a>
      </li>
      </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a  [routerLink]="['order-management']">Order Management</a>
      </li>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['promos']">Promo</a>
      </li>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a >Finance</a>
      </li>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['reports']">Reports</a>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['custom-reports']">Customized Reports</a>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['dashboard-control-centre']">Dashboard Control Centre</a>
      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->

  <!-- /#page-content-wrapper -->
<router-outlet></router-outlet>

</div>

Answer 1

你可以做的是创建一个新的javascript文件并将其放在'assets / js / theme.js'下。在此文件中，添加以下代码：

$.myTheme.navbar = {
   activate: function() {
      $("#menu-toggle").click(function(e) { e.preventDefault(); });
      $("#wrapper").toggleClass("toggled"); });
   }
}

然后在 HeaderComponent.ts 文件中，导入jquery和我们上面创建的theme.js文件，如下所示：

import 'jquery';
declare var $: any;
import 'assets/js/theme.js'; // change this path to point to the theme.js file in your assets folder

在ngOnInit()函数中，从theme.js：

调用activate函数

ngOnInit() {
    $.myTheme.navbar.activate();
    // other functions here
}

看看这是否解决了您的问题：）。

注意：别忘了在theme.js中的“脚本”数组中添加.angular-cli.json文件，如下所示：

.angular-cli.json 文件

...
"scripts": [
    ... // other scripts
    "assets/js/theme.js" // load this last
]
...

Answer 2

这是我的解决方法

<li class="nav-item nav-item-submenu">
    <a href="#k-nav" class="nav-link legitRipple dropdown-toggle" data-toggle="collapse">
        <i class="icon-copy"></i>
    </a>
    <div class="collapse" id="k-nav">
        <ul class="nav nav-sidebar" data-submenu-title="k">
            <li class="nav-item">
                <a [routerLink]="['./']" class="nav-link">k</a>
            </li>
        </ul>
    </div>
</li>

侧栏仅在页面刷新后工作[Angular 4]

2 个答案: