После входа в систему сворачивание боковой панели работает только при обновлении страницы. Снова не работает при нажатии другой кнопки панели навигации - PullRequest
Новая
       6

После входа в систему сворачивание боковой панели работает только при обновлении страницы. Снова не работает при нажатии другой кнопки панели навигации

1 голос
/ 11 апреля 2019

Я новичок в смысле стека.Я использовал шаблон для навигационной панели от https://frontendfunn.com/bootstrap-4/admin-dashboard-template-development-tutorial/. Когда я вхожу в систему, он переходит на страницу с навигационной панелью, но проблема в том, что когда я нажимаю на панель свертывания, ничего не происходит.Когда я обновляю страницу, она работает, но если щелкнуть другой параметр на боковой панели, параметр «Свернуть панель» не работает.Пожалуйста, помогите мне.

Скриншот панели навигации

login.component.ts: 

ngOnInit() {
    if (this.loginService.isLoggedIn()) {
      this.router.navigateByUrl('/addcandidates');
    }
  }

  onSubmit(form: NgForm) {
    this.loginService.login(form.value).subscribe(
      res => {
        // tslint:disable-next-line:no-string-literal
        this.loginService.setToken(res['token']);
        // this.successful = 'Successfully logged in';
        this.router.navigate(['addcandidates']);
      },
      err => {
        this.serverErrorMessages = err.error.message;
      }
    );
  }

main.component.ts: 

ngOnInit() {
    this.isLoggedIn = this.loginService.isLoggedIn;
  }

  onLogout() {
    this.loginService.deleteToken();
    this.router.navigate(['/login']);
  }

main.component.html: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <button class="navbar-toggler sideMenuToggler" type="button">
        <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav ml-auto">

        <a class="nav-link px-2" (click)="onLogout()">
          <span class="text">Logout</span>
        </a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">DropDown</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
 </div>
</nav>

<div class="wrapper d-flex">
  <div class="sideMenu bg-mattBlackLight">
    <div class="sidebar">
      <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link px-2" [routerLink]="['/']">
            <i class="material-icons icon">dashboard</i>
            <span class="text">Dashboard</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2" [routerLink]="['/addcandidates']">
            <i class="material-icons icon">person</i>
            <span class="text">Create New Test</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2" [routerLink]="['/qb_dept']">
            <i class="material-icons icon">insert_chart</i>
            <span class="text">Add Question Bank</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2" [routerLink]="['/currentexam']">
            <i class="material-icons icon">insert_chart</i>
            <span class="text">Current Tests</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2" [routerLink]="['/previousexam']">
            <i class="material-icons icon">settings</i>
            <span class="text">Previous Tests</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-2 sideMenuToggler">
            <i class="material-icons icon expandView ">view_list</i>
            <span class="text">Collapse Side Bar</span>
          </a>
        </li>   
      </ul>
    </div>
  </div>

</div>
...