Jquery 在angular 8中使用metismenu，第二级导航不会在mobile size屏幕中打开

我是angular的新手，尝试使用Jquery和metismenu将网站（管理主题）转换为angular（我知道很多人不想使用Jquery，但由于我尝试迁移网站，我不想修改很多东西） 场景：在网站中，当通过小型设备打开页面时，页面如下所示

这些步骤是： 1.用户单击fa栏图标 2.垂直菜单出现，当用户单击任何菜单图标时， 3.链接显示在右侧

挑战在于使用Angular 8获得相同的行为。 此时，my header component.html（获取fa栏工作的组件读取）

我的侧边栏菜单显示：

    <nav class="navbar-default navbar-static-side" role="navigation">
           <div class="sidebar-collapse">
              <ul class="nav metismenu" id="side-menu">
               <li class="nav-header">
                <div class="dropdown profile-element" dropdown>
                    <div class="circle">
                        <span class="initials" id="myFunction(twoinitials)"> 
                         {{currentUser.firstnameletter}}{{currentUser.lastnameletter}}</span>
                    </div>
                     <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span style="width: 100%;text-align: center" class="block m-t-xs font-bold"> 
                        {{currentUser.firstname}} {{currentUser.lastname}}</span>
                        <span style="width: 100%;text-align: center" class="block m-t-xs font-bold"> 
                        {{currentUser.role_id}}</span>
                    </a>
                </div>
                <div class="logo-element">

                </div>
            </li>
            <li>
                <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label" >Accounts</span> <span 
                class="fa arrow"></span></a>
                **<ul class="nav nav-second-level collapse"> 
                   <li><a routerLink="/paymentreq/newrequest" routerLinkActive="active- link" 
                   [routerLinkActiveOptions]="{exact:true}" *ngIf="show_paymentrequest">Payment 
                   Request</a></li>
                   <li><a routerLink="/paymentreq/payment-approval" 
                       routerLinkActive="active-link" [routerLinkActiveOptions]=" 
                      {exact:true}" *ngIf="show_paymentapproval">Payment Approval</a> </li>
                   <li><a routerLink="/paymentreq/payment-pay" routerLinkActive="active- 
                        link" [routerLinkActiveOptions]="{exact:true}" 
                        *ngIf="show_paymentpay">Process Payment </a></li>
                   <li><a routerLink="/paymentreq/payment-reports" routerLinkActive="active- 
                       link" [routerLinkActiveOptions]="{exact:true}" 
                       *ngIf="show_paymentreport">Payment Reports</a></li>
                </ul>**
           </li>
.......................

现在，有了这个设置，一切都可以在正常的屏幕上正常工作（菜单在侧面正常，fa栏按钮在那里，我可以跟随链接等） 但是，当我进入移动模式时，fa栏按钮起作用，并显示细长滚动条，但是，即使我在单击任何菜单按钮后可以看到发生了什么事情（左侧的绿色栏处于活动状态），第二级导航链接也不会出现。

---

我已经这样做了一天左右，读了很多书，尝试了很多不同的设置，但是都没有用，如果一个善良的灵魂能帮助我或者为我指出正确的方向，我会非常感激。

因为我找不到解决方案，我决定离开整个Metismen-nav bar malarkey，即使这需要一些时间，该应用程序现在运行得更好了

你好，有人需要帮助吗？

toggleNavigation(): void {
    jQuery("body").toggleClass("mini-navbar");
    smoothlyMenu();
}

    <nav class="navbar-default navbar-static-side" role="navigation">
           <div class="sidebar-collapse">
              <ul class="nav metismenu" id="side-menu">
               <li class="nav-header">
                <div class="dropdown profile-element" dropdown>
                    <div class="circle">
                        <span class="initials" id="myFunction(twoinitials)"> 
                         {{currentUser.firstnameletter}}{{currentUser.lastnameletter}}</span>
                    </div>
                     <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span style="width: 100%;text-align: center" class="block m-t-xs font-bold"> 
                        {{currentUser.firstname}} {{currentUser.lastname}}</span>
                        <span style="width: 100%;text-align: center" class="block m-t-xs font-bold"> 
                        {{currentUser.role_id}}</span>
                    </a>
                </div>
                <div class="logo-element">

                </div>
            </li>
            <li>
                <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label" >Accounts</span> <span 
                class="fa arrow"></span></a>
                **<ul class="nav nav-second-level collapse"> 
                   <li><a routerLink="/paymentreq/newrequest" routerLinkActive="active- link" 
                   [routerLinkActiveOptions]="{exact:true}" *ngIf="show_paymentrequest">Payment 
                   Request</a></li>
                   <li><a routerLink="/paymentreq/payment-approval" 
                       routerLinkActive="active-link" [routerLinkActiveOptions]=" 
                      {exact:true}" *ngIf="show_paymentapproval">Payment Approval</a> </li>
                   <li><a routerLink="/paymentreq/payment-pay" routerLinkActive="active- 
                        link" [routerLinkActiveOptions]="{exact:true}" 
                        *ngIf="show_paymentpay">Process Payment </a></li>
                   <li><a routerLink="/paymentreq/payment-reports" routerLinkActive="active- 
                       link" [routerLinkActiveOptions]="{exact:true}" 
                       *ngIf="show_paymentreport">Payment Reports</a></li>
                </ul>**
           </li>
.......................

 jQuery('#side-menu').metisMenu();  
    if (jQuery("body").hasClass('fixed-sidebar')) {
      jQuery('.sidebar-collapse').slimscroll({
        height: '100%'
      })
    }
  }