Javascript 如何在我的angular web应用程序中导入或使用外部JS文件和函数_Javascript_Angular_Animation_External Js

Javascript 如何在我的angular web应用程序中导入或使用外部JS文件和函数

javascript angular animation

Javascript 如何在我的angular web应用程序中导入或使用外部JS文件和函数,javascript,angular,animation,external-js,Javascript,Angular,Animation,External Js,我想将外部代码（html、js和css文件）集成到我的angular web应用程序中在此外部代码中，HTML文件如下所示： "scripts": [ "src/app/components/landing-page/js/imageComparisonSlider.js", "src/app/components/landing-page/js/owl.carousel.min.js", "src/app/

我想将外部代码（html、js和css文件）集成到我的angular web应用程序中

在此外部代码中，HTML文件如下所示：

 "scripts": [
              "src/app/components/landing-page/js/imageComparisonSlider.js",
              "src/app/components/landing-page/js/owl.carousel.min.js",
              "src/app/components/landing-page/js/cbpAnimatedHeader.js",
              "src/app/components/landing-page/js/theme-scripts.js"
            ]

index.html

<html>
<header>
</header>
<body>
</body>

 <script src="app/components/landing-page/js/bootstrap.min.js"></script>
  <script src="app/components/landing-page/js/owl.carousel.min.js"></script>
  <script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
  <script src="app/components/landing-page/js/theme-scripts.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
  <script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
  <script>
    /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
    initComparisons();
  </script>
<html>

并在我的angular web应用程序中导入index.html中的所有js文件

 <script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
  <script src="app/components/landing-page/js/owl.carousel.min.js"></script>
  <script src="app/components/landing-page/js/theme-scripts.js"></script>
  <script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>

我在stackblitz中添加了一些代码；

但它不起作用

谁能帮帮我，给我一些建议吗

致以最良好的祝愿

Leo

如果你想在angular项目中使用外部js，你必须在“脚本”：[]区域导入angular.json，这将允许你带来js并在没有问题的情况下进行构建

将外部脚本放入angular.json（路径正确且所有内容都正确）后，您应该

declare const initComparisons;
// ...
ngOnInit() {
  initComparisons();
}

如果给出的答案没有帮助，您是否可以创建一个实例来说明问题？PAHT是正确的，我运行ng build并成功。为什么要使用declare const？因为如果没有它，TypeScript将反对使用未声明的值

initcomparations

，我期望生成错误。但是我已经导入了外部js fileyout mean的这个函数；从'/js/imageComparisonSlider.js'导入{initComparisons}；声明const init比较；运行ng build后没有问题

declare const initComparisons;
// ...
ngOnInit() {
  initComparisons();
}