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中，这没有用。我看不到任何动画。

我已经搜索了一些解决方案，并且我已经像这样更改了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

如果要在angular项目中使用外部js，则必须在“ scripts”：[]区域中将angular.json导入，这将使您可以带上js并进行构建。

Answer 2

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

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

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

2 个答案: