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

看起来像引导程序是期望类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;
}

sidenavbar在移动视角4中未打开

1 个答案: