侧导航栏未在移动视图角度 4 中打开

Question

我正在尝试让我的 Angular 4 侧导航栏在移动视图中打开，但它没有打开。

这是我的代码：

header.component.html

<nav class="navbar  bg-white   fixed-top  navbar-expand-lg "  id="sectionsNav">
   <div class="container">
        <div class="navbar-translate">              
            <a class="navbar-brand" href="#">                       
            <button type="button" class="navbar-toggle" (click)="sidebarToggle()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>    
        <div class="collapse navbar-collapse" id="sidebar">
            <ul class="navbar-nav ml-auto">
                <li class="dropdown nav-item">
                  <a href="#/resident" class="nav-link" data-toggle="dropdown">
                      <i class="material-icons">apps</i> residents
                  </a>
                </li>
                <li class="dropdown nav-item">
                  <a href="#/socadminhome" class="nav-link" data-toggle="dropdown">
                      <i class="material-icons">view_day</i> Management
                  </a>
                </li>
                <li class="dropdown nav-item">
                    <a href="#fmhome" class="nav-link" data-toggle="dropdown">
                        <i class="material-icons">view_carousel</i> Manager
                    </a>                        
                </li>                    
            </ul>
        </div>            
    </div>
</nav>

header.component.ts

    import { Component, ElementRef, Input, ViewChild, OnInit  } from 
       '@angular/core';

      declare var $: any;

@Component({
    selector: 'app-header-cmp',
    templateUrl: 'header.component.html',
    styleUrls: ['header.component.css']
})

export class HeaderComponent implements OnInit {
    userId : any;
    currentUser : any;
    showLogin = 0;
    private toggleButton: any;
    private sidebarVisible: boolean;

    constructor(){
        this.userId = localStorage.getItem("userId");
        this.currentUser = localStorage.getItem("name");

        if(this.currentUser !== null && this.currentUser != 'null'){
            this.showLogin = 1;
        }else{
            this.showLogin = 0;
            this.currentUser = 'Sign In';
        }    
    }

    ngOnInit() { 

    }


    sidebarToggle() {
        $('#sidebar').toggleClass('active');
    };
}

我可以在 Chrome 开发人员工具的元素选项卡中看到，当单击切换按钮时，div 显示为活动状态。但是右边的菜单没有打开。

对需要进行哪些更改有任何想法吗？

Answer 1

看起来 bootstrap 期待课程 show 而不是 active

$('#sidebar').toggleClass('show');

话虽如此，尽量避免使用 jQuery（在 Angular 中）。会导致 jQuery 和 Angular 发生冲突。

执行此操作的正确方法是在 HTML 中使用 [class.show]。所以它看起来像这样

HTML：

<div class="collapse navbar-collapse" id="sidebar" [class.show]="isShowSidebar">

TS：

isShowSidebar: boolean = false;
.
.
.
sidebarToggle(){
    this.isShowSidebar = !this.isShowSidebar;
}