jQuery click事件未在生产模式angular5中触发

Question

我在我的angular 5应用程序中使用jquery这个插件 。 我在左侧嵌套了手风琴菜单。 当我在开发模式下运行应用程序时，菜单可以正常工作，可以按预期方式打开和关闭手风琴菜单，但是当我通过运行命令在生产模式下运行应用程序时

ng build --prod

然后单击事件仅在打开菜单后才触发，然后再也不会触发（菜单保持打开状态）。 我已经使用angular cli在我的angular应用程序中包含菜单js脚本。 该问题的解决方案是什么？ 在此先感谢您的是ts文件

import { Component, Inject, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery'
declare var ace :any;
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})

export class SidebarComponent {
currentDate:Date;
constructor( @Inject('Window') window: Window) { }
ngOnInit() {
$("#sidebar-collapse").on("click", function () {
  $('body').toggleClass('menumin');
});
this.currentDate=new Date();
 }
 ngAfterViewInit() {

ace.demo.init();

}
}

这是HTML文件

 <div id="sidebar" class="sidebar responsive ace-save-state"> <ul class="nav nav-list"> <li class="productname"> <a class="mjms_nav"> <span class="menu-text"> MJMS </span> <em> {{currentDate | date:'MMM-dd-yyyy'}}</em> </a> <b class="arrow"></b> </li> <li> <a [routerLink]="['/home/dashboard']"> <i class="menu-icon fa fa-tachometer"></i> <span class="menu-text"> Dashboard </span> </a> <b class="arrow"></b> </li> <li routerLinkActive="open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-graduation-cap"></i> <span class="menu-text"> Education Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class="open"> <a href="#0" class="dropdown-toggle"> <i class="menu-icon fa fa-caret-right"></i> Admission Information <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li routerLinkActive="active"> <a [routerLink]="['/education/admission/applicants/new']"> <i class="menu-icon fa fa-caret-right"></i> New Applications </a> <b class="arrow"></b> </li> <li routerLinkActive="active"> <a [routerLink]="['/education/admission/confirmed']"> <i class="menu-icon fa fa-caret-right"></i> Confirmed Applicant </a> <b class="arrow"></b> </li> <!-- <li class=""> <a href="entry_test_list.html"> <i class="menu-icon fa fa-caret-right"></i> Entry Test List </a> <b class="arrow"></b> </li> <li class=""> <a href="final_batch.html"> <i class="menu-icon fa fa-caret-right"></i> Final Batch </a> <b class="arrow"></b> </li> --> </ul> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Class Activity </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Results </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Co-Curricular activities </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Class Scheduling /Time table </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Course Upload </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Attendance </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Examination and results </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Hostel management </a> <b class="arrow"></b> </li> </ul> </li> <li routerLinkActive="open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-pie-chart"></i> <span class="menu-text"> Financial Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Payroll </a> <b class="arrow"></b> </li> <li routerLinkActive="open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa fa-caret-right"></i> <span class="menu-text"> Manage Fee </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li routerLinkActive="active"> <a [routerLink]="['/finance/fee/group']"> <i class="menu-icon fa fa-caret-right"></i> Fee Group </a> <b class="arrow"></b> </li> <li routerLinkActive="active"> <a [routerLink]="['/finance/fee/category']"> <i class="menu-icon fa fa-caret-right"></i> Fee Category </a> <b class="arrow"></b> </li> <li routerLinkActive="active"> <a [routerLink]="['/finance/fee/structure']"> <i class="menu-icon fa fa-caret-right"></i> Fee Structure </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> General Ledger </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Balance Sheet </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Income Statement </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-cube"></i> <span class="menu-text"> Assets Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Inventory </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Assets Assignment </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Assets Tracking </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Procurement </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-th"></i> <span class="menu-text"> HR Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="HR_emp_personalInfo.html"> <i class="menu-icon fa fa-caret-right"></i> Employee Profile </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Attendance </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Leaves </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Benefit & incentives </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Promotion Management </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Performance management </a> <b class="arrow"></b> </li> </ul> </li> <li class="#"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-envelope"></i> <span class="menu-text"> Communication Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Notice Board </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Notification </a> <b class="arrow"></b> </li> </ul> </li> <li class="#"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-th-large"></i> <span class="menu-text"> Administrative Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="Dashboard-Admin.html"> <i class="menu-icon fa fa-caret-right"></i> Directors Dashboard </a> <b class="arrow"></b> </li> <li class=""> <a href="Dashboard-teacher.html"> <i class="menu-icon fa fa-caret-right"></i> Teachers Dashboard </a> <b class="arrow"></b> </li> <li class=""> <a href="Dashboard-student.html"> <i class="menu-icon fa fa-caret-right"></i> Students Dashboard </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Parents Dashboard </a> <b class="arrow"></b> </li> </ul> </li> <li class="#"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-check"></i> <span class="menu-text"> User Rights Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Portal Admin </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-power-off"></i> <span class="menu-text"> Logout </span> </a> <b class="arrow"></b> </li> </ul> <!-- /.nav-list --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> </div> 

Answer 1

您应该在模板中使用绑定点击事件

在HTML

<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse" (click)="collapseSideBar()">

并在组件中

collapseSideBar() {
  $('body').toggleClass('menumin');
}