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

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>