我是 Angular 的新手，正在尝试使用 Jquery 和 metismenu 将网站（管理主题）转换为 Angular（我知道很多人不想使用 Jquery，但是当我尝试迁移网站时，我不想修改很多事情）场景：在通过小型设备打开的网站中，页面如下所示
步骤是： 1. 用户单击 fa-bars 图标 2. 出现垂直菜单，当用户单击任何菜单图标时， 3. 链接出现在右侧
挑战是使用 Angular 8 获得相同的行为。此时我的标题 component.html （让 fa-bar 工作读取的那个）
<div class="row border-bottom">
<nav class="navbar navbar-static-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa
fa-bars"></i> </a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<span class="m-r-sm text-muted welcome-message">XXXX</span>
</li>
<li>
<a (click)="removeValue()">
<i class="fa fa-sign-out"></i> Log out
</a>
</li>
</ul>
</nav>
</div>
我的头文件 component.ts 内容如下：
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>
.......................
我的侧边栏组件 ts 内容如下：
jQuery('#side-menu').metisMenu();
if (jQuery("body").hasClass('fixed-sidebar')) {
jQuery('.sidebar-collapse').slimscroll({
height: '100%'
})
}
}
现在，通过该设置，在正常屏幕中一切都“正常”（菜单在侧面正常，fa-bars 按钮在那里，我可以点击链接等）但是当我进入移动模式时，fa-bars按钮起作用并且出现了细长的滚动条，但是，即使在单击任何菜单按钮后我可以看到发生了某些事情（左侧的绿色条处于活动状态），也不会出现第二级导航链接。我已经这样做了一天左右，阅读了大量的内容并尝试了很多不同的设置，但无济于事，如果一个善良的灵魂可以帮助我或为我指明正确的方向，我将不胜感激。