Javascript 如何将html网站模板中的外部js jquery脚本修复到angular项目中_Javascript_Angular

Javascript 如何将html网站模板中的外部js jquery脚本修复到angular项目中

javascript angular

Javascript 如何将html网站模板中的外部js jquery脚本修复到angular项目中,javascript,angular,Javascript,Angular,我使用一个html网站模板来构建一个angular项目，但是我在自定义js脚本方面遇到了问题。custom.js中的菜单按钮（用于切换导航）和一些其他内容不起作用我尝试在index.html中链接脚本文件链接，并在angular.json配置文件中引用它下面是指向该文件的github链接这是index.html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conte

我使用一个html网站模板来构建一个angular项目，但是我在自定义js脚本方面遇到了问题。custom.js中的菜单按钮（用于切换导航）和一些其他内容不起作用

我尝试在index.html中链接脚本文件链接，并在angular.json配置文件中引用它

下面是指向该文件的github链接

这是index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CREXT | DRD</title>
<!--
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
    <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
    <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <link href="../build/css/custom.min.css" rel="stylesheet">

  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
       <app-root></app-root>
    </div>

    <!-- jQuery -->
    <!-- <script src="assets/vendors/"></script> -->
    <script src="assets/vendors/jquery/dist/jquery.min.js"></script>
    <script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/vendors/fastclick/lib/fastclick.js"></script>
    <script src="assets/vendors/nprogress/nprogress.js"></script>
    <script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
    <script src="assets/vendors/echarts/dist/echarts.min.js"></script>
    <script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
    <script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <script src="assets/vendors/iCheck/icheck.min.js"></script>
    <script src="assets/vendors/skycons/skycons.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.time.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
    <script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
    <script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
    <script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
    <script src="assets/vendors/DateJS/build/date.js"></script>
    <script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
    <script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
    <script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="assets/vendors/moment/min/moment.min.js"></script>
    <script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
  <script src="assets/js/custom.js"></script>
  <script src="assets/js/site.js"></script>
  </body>
</html>

custom.js文件

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');

当我集成网站模板时，此代码不起作用，但当我只单击“运行模板浏览器”时，此代码起作用

$MENU_TOGGLE.on('click', function() {
        console.log('clicked - menu toggle');

        if ($BODY.hasClass('nav-md')) {
            $SIDEBAR_MENU.find('li.active ul').hide();
            $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
        } else {
            $SIDEBAR_MENU.find('li.active-sm ul').show();
            $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
        }

    $BODY.toggleClass('nav-md nav-sm');

    setContentHeight();
});

看起来javascript已经呈现出来了，但当我点击按钮来切换菜单或任何使用jquery的控件时，它就不起作用了

$MENU_TOGGLE.on('click', function() {
        console.log('clicked - menu toggle');

        if ($BODY.hasClass('nav-md')) {
            $SIDEBAR_MENU.find('li.active ul').hide();
            $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
        } else {
            $SIDEBAR_MENU.find('li.active-sm ul').show();
            $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
        }

    $BODY.toggleClass('nav-md nav-sm');

    setContentHeight();
});