如何在我的角度Web应用程序中导入或使用外部JS文件和函数

Question

我想将外部代码（html，js和css文件）集成到我的角度Web应用程序中。

在这个外部代码中，HTML文件就像这样：

的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>

如你所见，有几个javascript文件，并将调用一个函数initComparisons（）。

如果我只双击index.html，一切正常。 但是我将这个html代码复制到一个component.html中，但是没有用。 我看不到任何动画。

我用google搜索了一些解决方案，我已经改变了我的angular.json文件，如下所示：

 "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"
            ]

并在我的角度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>

在component.ts中，我也这样做：

import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
    this.isLoggedIn = this.authService.isLoggedIn;
    initComparisons();
  }

我在stackblitz中添加了一些代码; https://stackblitz.com/edit/angular-qowfwy?file=angular.json

但它没有用。

有人可以帮助我，并给我一些建议。

最好的祝福，

狮子座

Answer 1

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

Answer 2

将外部脚本放在angular.json（路径正确和所有内容）之后，应该在组件中

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

如何在我的角度Web应用程序中导入或使用外部JS文件和函数

问题描述

2 个解决方案

解决方案1
0 2019-03-28 15:08:00

解决方案2
0 2019-03-28 15:10:57

如何在我的角度Web应用程序中导入或使用外部JS文件和函数

问题描述

2 个解决方案

解决方案1 0 2019-03-28 15:08:00

解决方案2 0 2019-03-28 15:10:57

解决方案1
0 2019-03-28 15:08:00

解决方案2
0 2019-03-28 15:10:57