Question

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

ng build --prod

然后点击事件仅在打开菜单后触发，然后永远不会被触发（菜单保持打开状态）。我使用angular cli在我的角度应用程序中包含menu 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

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

in html

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

和组件

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

在生产模式angular5中未触发jquery单击事件

1 个答案: