Angular 5 sidenav

Question

我正在尝试使用自举侧导航栏。

<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>

我正在使用标签中的一些js代码切换侧导航，但脚本标签不会以角度5运行。我怎么能切换它。我想我的.ts文件中有一些代码，如

   toggleSidebar():void{
     }

我不确定要切换它的内容。在脚本标记中切换的代码是

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

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

Answer 1

<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>

这是来自https://bootswatch.com/darkly/