使用角度 4 中的 angular-cli 加载时，完美的滚动条未加载

Question

我目前正在开发一个 Angular 4 项目，并且我正在使用 Angular cli。

目前我正在使用捆绑在一起的完美滚动条、bootstrap-slider.min.js、d3.js 等。

问题 当我们在 angular-cli scripts 数组中添加脚本文件时，它被捆绑在一起，并在浏览器中显示为 script.bundle.js.

现在在 script.js 文件中我们初始化了完美的滚动条，但是当页面加载时这根本不起作用。

我尝试了另一种方法是将代码放在文档就绪函数中，再次 ng 提供并刷新页面并且它起作用了。但是当更改路线并再次返回相同的视图时，它现在不起作用，我必须再次刷新它才能使其起作用。

感觉脚本代码打包后就不行了，请问你们有解决这个问题的办法吗。

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css",
    "styles.css"   ],   "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
    "../node_modules/d3/build/d3.min.js",
    "script.js"   ],

**Script.js**
/******* initializes custom scrollbars on elements *******/

  $(".perfect-scrollbar").each(function() {
      $(this).initCustomScrollbar();
  });

(function($) {

  $.fn.initCustomScrollbar = function() {

    $(this).perfectScrollbar();
  };
})(jQuery);

/******* initializes custom scrollbars on elements *******/
(function($) {

  $.fn.initCustomScrollbar = function() {

     $(this).perfectScrollbar();
      };
})(jQuery);

Answer 1

您需要在 ngAfterViewInit 的主应用程序组件中执行此操作。 它不会像这样工作。

查看LINK，了解如何在 Angular 中使用第三方 js 而无需打字

Instead you should try and do all the modification AfterViewInit

npm install jquery --save and npm install bootstrap --save
Step two

Add the jquery scripts file in .angular-cli.json file

  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"
  ],
Step three

Adding a var in component to be used as a global variable

//using external js modules in Angular
declare var $: any;
Then in

ngAfterViewInit(){


        $(".perfect-scrollbar").each(function() {
          $(this).initCustomScrollbar();
      });

    (function($) {

      $.fn.initCustomScrollbar = function() {

        $(this).perfectScrollbar();
      };
    })(jQuery);

    /******* initializes custom scrollbars on elements *******/
    (function($) {

      $.fn.initCustomScrollbar = function() {

         $(this).perfectScrollbar();
          };
    })(jQuery);

}