Javascript 角度5侧导航

我正在尝试使用引导侧导航栏

<nav id="sidebar"   [(class.slide-in)]="slideIn"  >
     <div class="sidebar-header">
         <img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
     </div>

     <ul class="list-unstyled components">
         <p>Content</p>
         <li id="sidebar-list" style="border:2px;">  
             <a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
         </li>
         <li id="sidebar-list">
             <a href="#">Hello World</a>
         </li>
         <li id="sidebar-list">
             <a href="#">Data Binding</a>
         </li>


     </ul>-->
</nav>

<!-- Page Content Holder -->
<div id="content">

     <nav class="navbar navbar-default">
          <div class="container-fluid">
               <button (click)="toggleSidebar()"   style="margin:0px;border-radius: 0px;     height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                    <i class="glyphicon glyphicon-align-left"></i>
                    <span>MENU</span>

               </button>
           </div>
       </nav>

我不知道该放什么来切换它。要在脚本标记中切换的代码为

   <script >
         $(document).ready(function () {
             $('#sidebarCollapse').on('click', function () {
                 $('#sidebar').toggleClass('active');

                   console.log("HII");
             });
         });
         console.log("HII");
  </script>

$（文档）.ready（函数（）{
$（'sidebarCollapse'）。在（'click'，函数（）{
$（“#边栏”）.toggleClass（'active'）；
控制台日志（“HII”）；
});
});
控制台日志（“HII”）；

切换导航

您使用的是什么引导库，以及哪个版本？您有一些明显的错误，但为了能够帮助您，您需要向我们提供更多信息。这就是我正在使用的
   <script >
         $(document).ready(function () {
             $('#sidebarCollapse').on('click', function () {
                 $('#sidebar').toggleClass('active');

                   console.log("HII");
             });
         });
         console.log("HII");
  </script>

<nav class="navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <b>
                <a class="navbar-brand" href="#">
                    Title
                </a>
            </b>
            <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>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
                <li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
                <li routerLinkActive="active"><a routerLink="route3">Route3</a></li>       
            </ul>
        </div>
    </div>
</nav>